[Filters] Fix bug where changes to appliedFilters prop don't get respected

.changeset/three-trains-tie.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Fixed a bug in `Filters` where changes to the `appliedFilters` prop were not being handled

polaris-react/src/components/Filters/Filters.tsx

@@ -141,6 +141,7 @@ 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(() => {
@@ -157,23 +158,44 @@ export function Filters({
   const appliedFilterKeys = appliedFilters?.map(({key}) => key);
 
   const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(
-    ({pinned, key}) => {
-      const isPinnedOrApplied =
-        Boolean(pinned) || appliedFilterKeys?.includes(key);
-      return isPinnedOrApplied;
-    },
-  );
-  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>(
-    pinnedFiltersFromPropsAndAppliedFilters.map(({key}) => key),
+    ({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),
   );
 
-  const pinnedFilters = localPinnedFilters
+  useEffect(() => {
+    const allAppliedFilterKeysInLocalPinnedFilters = appliedFilterKeys?.every(
+      (value) => localPinnedFilters.includes(value),
+    );
+
+    if (!allAppliedFilterKeysInLocalPinnedFilters) {
+      setLocalPinnedFilters((currentLocalPinnedFilters: string[]): string[] => {
+        const newPinnedFilters =
+          appliedFilterKeys?.filter(
+            (filterKey) =>
+              !currentLocalPinnedFilters.find(
+                (currentFilterKey) => currentFilterKey === filterKey,
+              ),
+          ) || [];
+
+        return [...currentLocalPinnedFilters, ...newPinnedFilters];
+      });
+    }
+  }, [appliedFilterKeys, localPinnedFilters]);
+
+  const pinnedFiltersFromLocalState = 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

@@ -205,6 +205,33 @@ describe('<Filters />', () => {
     });
   });
 
+  it('correctly adds the applied filters when updated via props', () => {
+    const appliedFilters = [
+      {
+        ...defaultProps.filters[2],
+        label: 'Value is Baz',
+        value: ['Baz'],
+        onRemove: jest.fn(),
+      },
+    ];
+    const wrapper = mountWithApp(
+      <Filters {...defaultProps} appliedFilters={[]} />,
+    );
+
+    expect(wrapper).not.toContainReactComponent(FilterPill, {
+      selected: true,
+    });
+
+    wrapper.setProps({
+      appliedFilters,
+    });
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Value is Baz',
+      selected: true,
+    });
+  });
+
   it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
     const scrollSpy = jest.fn();
     HTMLElement.prototype.scroll = scrollSpy;