[FilterPill] Update initialActive state to check for applied filter (#…

…8957)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

We observed an issue on the Orders index where navigating to an unsaved
view w/ filters applied causes each filter's popover to open by default.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Adds a check to the `initialActive` state for the `FilterPill` component
to ensure its popover is closed by default if the filter is already
applied.

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

1. (Spin w/ current behavior) Go to [Orders
index](https://admin.web.filter-pill-polaris-before.brent-sharrow.us.spin.dev/store/shop1/orders?inContextTimeframe=none&status=open&fulfillment_status=unshipped%2Cpartial%2Cscheduled&destination_country_code=null%2CDZ%2CAO%2CAC%2CBJ%2CBW%2CBF%2CBI%2CCM%2CCV%2CCF%2CTD%2CKM%2CCG%2CCD%2CCI%2CDJ%2CEG%2CGQ%2CER%2CSZ%2CET%2CGA%2CGM%2CGH%2CGN%2CGW%2CKE%2CLS%2CLR%2CLY%2CMG%2CMW%2CML%2CMR%2CMU%2CMA%2CMZ%2CNA%2CNE%2CNG%2CRW%2CST%2CSN%2CSC%2CSL%2CSO%2CZA%2CSS%2CSH%2CSD%2CTZ%2CTG%2CTA%2CTN%2CUG%2CEH%2CZM%2CZW)

Popovers for applied filters should be opened by default:
<img width="630" alt="09-43-5db16-9zgsl"
src="https://github.com/Shopify/polaris/assets/2466523/5611cdea-9a92-4a1c-8c30-a9a4ed1e4b17">

2. (Spin w/ fix) Go to [Orders
index](https://admin.web.filter-pill-polaris.brent-sharrow.us.spin.dev/store/shop1/orders?inContextTimeframe=none&status=open&fulfillment_status=unshipped%2Cpartial%2Cscheduled&destination_country_code=null%2CDZ%2CAO%2CAC%2CBJ%2CBW%2CBF%2CBI%2CCM%2CCV%2CCF%2CTD%2CKM%2CCG%2CCD%2CCI%2CDJ%2CEG%2CGQ%2CER%2CSZ%2CET%2CGA%2CGM%2CGH%2CGN%2CGW%2CKE%2CLS%2CLR%2CLY%2CMG%2CMW%2CML%2CMR%2CMU%2CMA%2CMZ%2CNA%2CNE%2CNG%2CRW%2CST%2CSN%2CSC%2CSL%2CSO%2CZA%2CSS%2CSH%2CSD%2CTZ%2CTG%2CTA%2CTN%2CUG%2CEH%2CZM%2CZW)

Popovers for applied filters should be closed by default:
<img width="631" alt="09-45-sc7u3-iracp"
src="https://github.com/Shopify/polaris/assets/2466523/b6223c76-6df7-42bb-a3b3-4d0ee3d99e15">


🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes (No
new props added)
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide (No style updates)

.changeset/honest-pumpkins-ring.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `FilterPill` so that it no longer opens an applied filter's popover by default

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

@@ -298,7 +298,9 @@ export function AlphaFilters({
         <FilterPill
           key={filterKey}
           {...pinnedFilter}
-          initialActive={hasMounted.current && !pinnedFilter.pinned}
+          initialActive={
+            hasMounted.current && !pinnedFilter.pinned && !appliedFilter
+          }
           label={appliedFilter?.label || pinnedFilter.label}
           filterKey={filterKey}
           selected={appliedFilterKeys?.includes(filterKey)}

polaris-react/src/components/AlphaFilters/tests/AlphaFilters.test.tsx

@@ -143,6 +143,26 @@ describe('<AlphaFilters />', () => {
     });
   });
 
+  it('will not open the popover for an applied filter by default', () => {
+    const appliedFilters = [
+      {
+        ...defaultProps.filters[2],
+        label: 'Bux',
+        value: ['Bux'],
+        onRemove: jest.fn(),
+      },
+    ];
+    const wrapper = mountWithApp(
+      <AlphaFilters {...defaultProps} appliedFilters={appliedFilters} />,
+    );
+
+    expect(wrapper).toContainReactComponentTimes(FilterPill, 2);
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Bux',
+      initialActive: false,
+    });
+  });
+
   it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
     const scrollSpy = jest.fn();
     HTMLElement.prototype.scroll = scrollSpy;