[Filters] Fix vanishing applied filters bug

.changeset/beige-jeans-scream.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Fixed `Filters` pinned filter pill not remaining when applied values are cleared

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) =>
     () => {

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;