From 617d21025fa32bebb3fb8b4e938f1539de5ce973 Mon Sep 17 00:00:00 2001
From: Romeo Van Snick <romeo@romeovansnick.be>
Date: Tue, 29 Oct 2024 20:27:47 +1100
Subject: [PATCH] Avoid filter popover overflow (#49211)
* Add max-height to the click actions popover to prevent overflow and infinite scroll
* Add reproduction for #48851
* Update reproduction to speed it up
* Use existing helper for table header click
* Add max height to string filter picker
* Revert "Add max-height to the click actions popover to prevent overflow and infinite scroll"
This reverts commit 166478d892958bbb1ad022513417b95c81d3a890.
---
.../filters-reproductions.cy.spec.js | 31 +++++++++++++++++++
.../StringFilterPicker/StringFilterPicker.tsx | 5 +--
2 files changed, 34 insertions(+), 2 deletions(-)
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 c47c7d3dab1..3ace047cdd7 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 72f1278df52..d9b7462a28b 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>
);
}
--
GitLab