From 2062859cbd359fd1e59a175879d742575869375e Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 15:03:19 +0100
Subject: [PATCH 1/3] chore: fix filters bug

---
 .../src/components/Filters/Filters.tsx        | 21 ++++++++--------
 .../components/Filters/tests/Filters.test.tsx | 25 +++++++++++++++++++
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx
index b246ff63dd9..9ed2e22e1f4 100644
--- a/polaris-react/src/components/Filters/Filters.tsx
+++ b/polaris-react/src/components/Filters/Filters.tsx
@@ -141,7 +141,6 @@ export function Filters({
   const {mdDown} = useBreakpoints();
   const {polarisSummerEditions2023: se23} = useFeatures();
   const [popoverActive, setPopoverActive] = useState(false);
-  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
   const hasMounted = useRef(false);
 
   useEffect(() => {
@@ -158,23 +157,23 @@ export function Filters({
   const appliedFilterKeys = appliedFilters?.map(({key}) => key);
 
   const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(
-    ({pinned, key}) =>
-      (Boolean(pinned) || appliedFilterKeys?.includes(key)) &&
-      // Filters that are pinned in local state display at the end of our list
-      !localPinnedFilters.find((filterKey) => filterKey === key),
+    ({pinned, key}) => {
+      const isPinnedOrApplied =
+        Boolean(pinned) || appliedFilterKeys?.includes(key);
+      return isPinnedOrApplied;
+    },
+  );
+  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>(
+    pinnedFiltersFromPropsAndAppliedFilters.map(({key}) => key),
   );
-  const pinnedFiltersFromLocalState = localPinnedFilters
+
+  const pinnedFilters = localPinnedFilters
     .map((key) => filters.find((filter) => filter.key === key))
     .reduce<FilterInterface[]>(
       (acc, filter) => (filter ? [...acc, filter] : acc),
       [],
     );
 
-  const pinnedFilters = [
-    ...pinnedFiltersFromPropsAndAppliedFilters,
-    ...pinnedFiltersFromLocalState,
-  ];
-
   const onFilterClick =
     ({key, onAction}: FilterInterface) =>
     () => {
diff --git a/polaris-react/src/components/Filters/tests/Filters.test.tsx b/polaris-react/src/components/Filters/tests/Filters.test.tsx
index 615983fb312..1abc7321176 100644
--- a/polaris-react/src/components/Filters/tests/Filters.test.tsx
+++ b/polaris-react/src/components/Filters/tests/Filters.test.tsx
@@ -180,6 +180,31 @@ describe('<Filters />', () => {
     expect(wrapper).toContainReactComponent(ActionList);
   });
 
+  it('will not remove a pinned filter when it is removed from the applied filters array', () => {
+    const appliedFilters = [
+      {
+        ...defaultProps.filters[2],
+        label: 'Value is Baz',
+        value: ['Baz'],
+        onRemove: jest.fn(),
+      },
+    ];
+    const wrapper = mountWithApp(
+      <Filters {...defaultProps} appliedFilters={appliedFilters} />,
+    );
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Value is Baz',
+      selected: true,
+    });
+    wrapper.setProps({appliedFilters: []});
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Baz',
+      selected: false,
+    });
+  });
+
   it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
     const scrollSpy = jest.fn();
     HTMLElement.prototype.scroll = scrollSpy;

From e3704b07f8d9bed03a29ddd42a00afc2fdbe3890 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 15:04:23 +0100
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/beige-jeans-scream.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/beige-jeans-scream.md

diff --git a/.changeset/beige-jeans-scream.md b/.changeset/beige-jeans-scream.md
new file mode 100644
index 00000000000..7ae35179a78
--- /dev/null
+++ b/.changeset/beige-jeans-scream.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+[Filters] Fix bug where applied filters get removed incorrectly

From 012b5db8624beb1bd3a80917d177b303e89850f0 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 16:45:52 +0100
Subject: [PATCH 3/3] Update .changeset/beige-jeans-scream.md

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/beige-jeans-scream.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/beige-jeans-scream.md b/.changeset/beige-jeans-scream.md
index 7ae35179a78..134c33589b0 100644
--- a/.changeset/beige-jeans-scream.md
+++ b/.changeset/beige-jeans-scream.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-[Filters] Fix bug where applied filters get removed incorrectly
+Fixed `Filters` pinned filter pill not remaining when applied values are cleared