diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index a8e2c015..d7195b0c 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -35,7 +35,7 @@ export type Props = PropsWithSpread< /** * Function for handling dismissing a chip. */ - onDismiss?: () => void; + onDismiss?: (event: MouseEvent) => void; /** * Whether the chip is selected. */ diff --git a/src/components/SearchAndFilter/SearchAndFilter.test.tsx b/src/components/SearchAndFilter/SearchAndFilter.test.tsx index e23565f0..0f7027be 100644 --- a/src/components/SearchAndFilter/SearchAndFilter.test.tsx +++ b/src/components/SearchAndFilter/SearchAndFilter.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from "@testing-library/react"; +import { render, screen, waitFor, within } from "@testing-library/react"; import React from "react"; import SearchAndFilter from "./SearchAndFilter"; @@ -413,4 +413,40 @@ describe("Search and filter", () => { }); expect(onExpandChange).toHaveBeenCalled(); }); + + it("does not toggle the panel when a filter is dismissed", async () => { + const returnSearchData = jest.fn(); + const onExpandChange = jest.fn(); + const onPanelToggle = jest.fn(); + render( + , + ); + + // onPanelToggle is called on initial render, so we need to clear the mock before asserting + onPanelToggle.mockClear(); + + // Dismiss the Cloud: Google filter chip + await waitFor(async () => { + const cloudChip: HTMLElement = screen + .getByText("CLOUD") + .closest(".p-chip"); + + const dismissButton = within(cloudChip).getByRole("button", { + name: "Dismiss", + }); + + await userEvent.click(dismissButton); + }); + + expect(onPanelToggle).not.toHaveBeenCalled(); + }); }); diff --git a/src/components/SearchAndFilter/SearchAndFilter.tsx b/src/components/SearchAndFilter/SearchAndFilter.tsx index 98ec155f..913dea4b 100644 --- a/src/components/SearchAndFilter/SearchAndFilter.tsx +++ b/src/components/SearchAndFilter/SearchAndFilter.tsx @@ -264,7 +264,11 @@ const SearchAndFilter = ({ lead={chip.lead} value={chip.value} key={`search-${chip.lead}+${chip.value}`} - onDismiss={() => removeFromSelected(chip)} + onDismiss={(event) => { + // Prevent filter chip dismissals from bubbling up and triggering the parent onClick handler + event.stopPropagation(); + removeFromSelected(chip); + }} selected={true} quoteValue={chip.quoteValue} />