diff --git a/e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js b/e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js index c47c7d3dab1c33738823aee24d86e747e73a2189..3ace047cdd7ec7d11b9a3818649444213e01e0f9 100644 --- a/e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js +++ b/e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js @@ -1482,3 +1482,34 @@ describe("issue 47887", () => { }); }); }); + +describe("Issue 48851", () => { + beforeEach(() => { + restore(); + cy.signInAsNormalUser(); + cy.viewport(1050, 300); + }); + + const manyValues = Array(12) + .fill(0) + .map(() => Math.round(Math.random() * 1000_000_000_000).toString(36)) + .join(", "); + + it("should not overflow the filter popover, even when there are a lot of values (metabase#48851)", () => { + openProductsTable(); + tableHeaderClick("Title"); + + popover().within(() => { + cy.findByText("Filter by this column").click(); + cy.findByText("Is").click(); + }); + + popover().last().findByText("Contains").click(); + popover() + .first() + .findByPlaceholderText("Enter some text") + .type(manyValues, { timeout: 0 }); + + popover().button("Add filter").should("be.visible"); + }); +}); diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx index 72f1278df522f8c45f85c5421d04989fc0fd3299..d9b7462a28b01c7c3e555ef44b5e8de4c6efe5b0 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx @@ -137,7 +137,7 @@ function StringValueInput({ if (type === "partial") { return ( - <Flex p="md"> + <Box p="md" pb={0} mah="40vh" style={{ overflow: "auto" }}> <MultiAutocomplete value={values} data={[]} @@ -147,7 +147,8 @@ function StringValueInput({ aria-label={t`Filter value`} onChange={onChange} /> - </Flex> + <Box pt="md" /> + </Box> ); }