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 3ace047cdd7ec7d11b9a3818649444213e01e0f9..dd7370b6b7b495dc465bf6d39fab90fac03060d0 100644 --- a/e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js +++ b/e2e/test/scenarios/filters-reproductions/filters-reproductions.cy.spec.js @@ -1513,3 +1513,36 @@ describe("Issue 48851", () => { popover().button("Add filter").should("be.visible"); }); }); + +describe("issue 49321", () => { + beforeEach(() => { + restore(); + cy.signInAsNormalUser(); + }); + + it("should not require multiple clicks to apply a filter (metabase#49321)", () => { + openProductsTable({ mode: "notebook" }); + filter({ mode: "notebook" }); + popover().within(() => { + cy.findByText("Title").click(); + cy.findByText("Is").click(); + }); + popover().last().findByText("Contains").click(); + + popover().then($popover => { + const { width } = $popover[0].getBoundingClientRect(); + cy.wrap(width).as("initialWidth"); + }); + + popover() + .findByPlaceholderText("Enter some text") + .type("aaaaaaaaaa, bbbbbbbbbbb,"); + + cy.get("@initialWidth").then(initialWidth => { + popover().should($popover => { + const { width } = $popover[0].getBoundingClientRect(); + expect(width).to.eq(initialWidth); + }); + }); + }); +}); diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx index ce44f49fcc17a8d800fa26ce6725cd7619da2138..e7a85e12800ae69f33e4bc96e628d9ff4e796d8c 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx @@ -14,7 +14,7 @@ import { NumberFilterValuePicker } from "../../FilterValuePicker"; import { FilterOperatorPicker } from "../FilterOperatorPicker"; import { FilterPickerFooter } from "../FilterPickerFooter"; import { FilterPickerHeader } from "../FilterPickerHeader"; -import { MAX_WIDTH, MIN_WIDTH } from "../constants"; +import { WIDTH } from "../constants"; import type { FilterPickerWidgetProps } from "../types"; import { CoordinateColumnPicker } from "./CoordinateColumnPicker"; @@ -74,8 +74,7 @@ export function CoordinateFilterPicker({ return ( <Box component="form" - miw={MIN_WIDTH} - maw={MAX_WIDTH} + w={WIDTH} data-testid="coordinate-filter-picker" onSubmit={handleSubmit} > diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx index 7178143e0362ea5e3b69727f982f6e023d1fd0ce..9772c340296143a1c3fac03ca786991c78bec3a4 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.styled.tsx @@ -2,10 +2,9 @@ import styled from "@emotion/styled"; import AccordionList from "metabase/core/components/AccordionList"; -import { MAX_WIDTH, MIN_WIDTH } from "../constants"; +import { WIDTH } from "../constants"; export const StyledAccordionList = styled(AccordionList)` color: var(--mb-color-filter); - min-width: ${MIN_WIDTH}px; - max-width: ${MAX_WIDTH}px; + width: ${WIDTH}px; `; diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx index 56d0b2ba3a6d8d962450a58a4d6c40dd2e9a264c..191b6e97615b572c3983bf3b41cb84b1ebcde5fa 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx @@ -14,7 +14,7 @@ import { NumberFilterValuePicker } from "../../FilterValuePicker"; import { FilterOperatorPicker } from "../FilterOperatorPicker"; import { FilterPickerFooter } from "../FilterPickerFooter"; import { FilterPickerHeader } from "../FilterPickerHeader"; -import { MAX_WIDTH, MIN_WIDTH } from "../constants"; +import { WIDTH } from "../constants"; import type { FilterPickerWidgetProps } from "../types"; export function NumberFilterPicker({ @@ -66,8 +66,7 @@ export function NumberFilterPicker({ return ( <Box component="form" - miw={MIN_WIDTH} - maw={MAX_WIDTH} + w={WIDTH} data-testid="number-filter-picker" onSubmit={handleSubmit} > 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 d9b7462a28b01c7c3e555ef44b5e8de4c6efe5b0..2d0baa7149d1dba19afcf59d7614cd0cecb80799 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx @@ -13,7 +13,7 @@ import { StringFilterValuePicker } from "../../FilterValuePicker"; import { FilterOperatorPicker } from "../FilterOperatorPicker"; import { FilterPickerFooter } from "../FilterPickerFooter"; import { FilterPickerHeader } from "../FilterPickerHeader"; -import { MAX_WIDTH, MIN_WIDTH } from "../constants"; +import { WIDTH } from "../constants"; import type { FilterPickerWidgetProps } from "../types"; export function StringFilterPicker({ @@ -66,8 +66,7 @@ export function StringFilterPicker({ return ( <Box component="form" - miw={MIN_WIDTH} - maw={MAX_WIDTH} + w={WIDTH} data-testid="string-filter-picker" onSubmit={handleSubmit} > diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx index 4aabd3e30a273959584ce0ebf088a56e44c77d8d..ace500f1c223e15357c7e3378a9f40c5b237b4c6 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx @@ -12,7 +12,7 @@ import * as Lib from "metabase-lib"; import { FilterOperatorPicker } from "../FilterOperatorPicker"; import { FilterPickerFooter } from "../FilterPickerFooter"; import { FilterPickerHeader } from "../FilterPickerHeader"; -import { MAX_WIDTH, MIN_WIDTH } from "../constants"; +import { WIDTH } from "../constants"; import type { FilterPickerWidgetProps } from "../types"; export function TimeFilterPicker({ @@ -62,8 +62,7 @@ export function TimeFilterPicker({ return ( <Box component="form" - miw={MIN_WIDTH} - maw={MAX_WIDTH} + w={WIDTH} data-testid="time-filter-picker" onSubmit={handleSubmit} > diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/constants.ts b/frontend/src/metabase/querying/filters/components/FilterPicker/constants.ts index 267a56f6faec98c12e5a639b6064721a2aced001..59945485595f32043bf16058843b7bc8598d69fa 100644 --- a/frontend/src/metabase/querying/filters/components/FilterPicker/constants.ts +++ b/frontend/src/metabase/querying/filters/components/FilterPicker/constants.ts @@ -1,2 +1,3 @@ -export const MIN_WIDTH = 300; -export const MAX_WIDTH = 410; +export const MIN_WIDTH = 380; +export const MAX_WIDTH = 380; +export const WIDTH = 380;