From c4804eaf66d31e99c0ad659f62f5d249069df3ef Mon Sep 17 00:00:00 2001
From: Julie Muzina <julie.muzina@canonical.com>
Date: Thu, 12 Sep 2024 09:20:18 -0400
Subject: [PATCH] fix: search and filter panel no longer opens when dismissing
 a filter (#1093)

---
 src/components/Chip/Chip.tsx                  |  2 +-
 .../SearchAndFilter/SearchAndFilter.test.tsx  | 38 ++++++++++++++++++-
 .../SearchAndFilter/SearchAndFilter.tsx       |  6 ++-
 3 files changed, 43 insertions(+), 3 deletions(-)

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<HTMLButtonElement>) => 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(
+      <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();
+  });
 });
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}
             />