fix: search and filter panel no longer opens when dismissing a filter (…

…#1093)

src/components/Chip/Chip.tsx

@@ -35,7 +35,7 @@ export type Props = PropsWithSpread<
     /**
      * Function for handling dismissing a chip.
      */
-    onDismiss?: () => void;
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Whether the chip is selected.
      */

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(
+      <SearchAndFilter
+        filterPanelData={sampleData}
+        returnSearchData={returnSearchData}
+        onExpandChange={onExpandChange}
+        onPanelToggle={onPanelToggle}
+        existingSearchData={[
+          { lead: "Cloud", value: "Google" },
+          { lead: "Region", value: "eu-west-1" },
+        ]}
+      />,
+    );
+
+    // 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();
+  });
 });

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}
             />