[Filters][Collapsible] Add focus on filter when collapsible animation ends (#7915)

### WHY are these changes introduced?

Fixes #7822

In the Filters, opening a collapsible activates the Focus immediately.
In cases like having a combobox within the collapsible, this causes a
visual bug where the combobox is focused and opened prematurely. The
combobox continues its transition animation, while the popover stays in
place.

### WHAT is this pull request doing?

#### Summary of the changes committed
- Introduce the `onAnimationEnd` prop to `<Collapsible />`, a callback
that gets called after the collapsible animation occurs
- Set `readyForFocus` state when toggling a collapsible in `<Filters />`
  - Set `readyForFocus` to false on `toggleFilter`
  - Set `readyForFocus` to true on Collapsible's `onAnimationEnd`

<details>
  <summary>Before</summary>
Click on 'More filters' and open the 'Tagged with' collapsible. The
combobox popover partially covers the textfield.
<img
src="https://user-images.githubusercontent.com/104938709/207687968-6df6b1d6-dde0-4f36-9097-b3aabfdf182c.gif"
alt="Click on 'More filters' and open the 'Tagged with' collapsible. The
combobox popover partially covers the textfield." />
</details>

<details>
  <summary>After</summary>
Click on 'More filters' and open the 'Tagged with' collapsible. The
combobox popover appears beneath the textfield.
<img
src="https://user-images.githubusercontent.com/104938709/207687984-b7747c5d-ae60-4ab0-bd69-8c9501510afc.gif"
alt="Click on 'More filters' and open the 'Tagged with' collapsible. The
combobox popover partially covers the textfield.">
</details>

Author: melaniedamilig

.changeset/shiny-fans-build.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+---
+
+- Added the `onAnimationEnd` prop to `Collapsible`
+- Fixed a bug in `Filters` where focus was moved to collapsed filter contents before the `Collapsible` animation ended

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

@@ -24,6 +24,8 @@ export interface CollapsibleProps {
   transition?: boolean | Transition;
   /** @deprecated Re-measuring is no longer necessary on children update **/
   preventMeasuringOnChildrenUpdate?: boolean;
+  /** Callback when the animation completes. */
+  onAnimationEnd?(): void;
   /** The content to display inside the collapsible. */
   children?: React.ReactNode;
 }
@@ -37,6 +39,7 @@ export function Collapsible({
   transition = true,
   preventMeasuringOnChildrenUpdate: _preventMeasuringOnChildrenUpdate,
   children,
+  onAnimationEnd,
 }: CollapsibleProps) {
   const [height, setHeight] = useState(0);
   const [isOpen, setIsOpen] = useState(open);
@@ -73,9 +76,10 @@ export function Collapsible({
       if (target === collapsibleContainer.current) {
         setAnimationState('idle');
         setIsOpen(open);
+        onAnimationEnd && onAnimationEnd();
       }
     },
-    [open],
+    [onAnimationEnd, open],
   );
 
   const startAnimation = useCallback(() => {

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

@@ -232,6 +232,21 @@ describe('<Collapsible />', () => {
       });
     });
 
+    it('calls onAnimationEnd when provided', () => {
+      const onAnimationEnd = jest.fn();
+      const collapsible = mountWithApp<CollapsibleProps>(
+        <Collapsible id="test-collapsible" open onAnimationEnd={onAnimationEnd}>
+          content
+        </Collapsible>,
+      );
+
+      collapsible.setProps({open: false});
+
+      fireTransitionEnd(collapsible);
+
+      expect(onAnimationEnd).toHaveBeenCalledTimes(1);
+    });
+
     it('does not complete opening transition if onTransitionEnd fires on a different target', () => {
       const id = 'test-collapsible';
       const collapsible = mountWithApp<CollapsibleProps>(

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

@@ -208,7 +208,11 @@ class FiltersInner extends Component<CombinedProps, State> {
             </div>
             {appliedFilterBadgeMarkup}
           </button>
-          <Collapsible id={collapsibleID} open={filterIsOpen}>
+          <Collapsible
+            id={collapsibleID}
+            open={filterIsOpen}
+            onAnimationEnd={this.setReadyForFocus(true)}
+          >
             <div className={styles.FilterNodeContainer}>
               <Focus
                 disabled={!filterIsOpen || !readyForFocus || !open}
@@ -502,19 +506,11 @@ class FiltersInner extends Component<CombinedProps, State> {
     this.setState({readyForFocus: newState});
   };
 
-  private openFilter(key: string) {
-    this.setState({[`${key}${Suffix.Filter}`]: true});
-  }
-
-  private closeFilter(key: string) {
-    this.setState({[`${key}${Suffix.Filter}`]: false});
-  }
-
   private toggleFilter(key: string) {
     if (this.state[`${key}${Suffix.Filter}`] === true) {
-      this.closeFilter(key);
+      this.setState({readyForFocus: false, [`${key}${Suffix.Filter}`]: false});
     } else {
-      this.openFilter(key);
+      this.setState({readyForFocus: false, [`${key}${Suffix.Filter}`]: true});
     }
   }
 

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

@@ -15,6 +15,7 @@ import {Filters, FiltersProps} from '../Filters';
 import {ConnectedFilterControl, TagsWrapper} from '../components';
 import * as focusUtils from '../../../utilities/focus';
 import styles from '../Filters.scss';
+import {Focus} from '../../Focus';
 
 const MockFilter = (props: {id: string}) => <div id={props.id} />;
 const MockChild = () => <div />;
@@ -725,6 +726,52 @@ describe('<Filters />', () => {
       });
     });
   });
+
+  describe('readyForFocus', () => {
+    it('unfocuses the filter when a filter is toggled', () => {
+      const resourceFilters = mountWithApp(<Filters {...mockProps} />);
+
+      resourceFilters
+        .find(Button, {children: 'More filters'})!
+        .trigger('onClick');
+
+      resourceFilters
+        .find('button', {id: 'filterOneToggleButton'})!
+        .trigger('onClick');
+
+      expect(
+        resourceFilters.find(Collapsible, {id: 'filterOneCollapsible'})!,
+      ).toContainReactComponent(Focus, {
+        disabled: true,
+      });
+    });
+
+    it('focuses the filter when Collapsible is opened', () => {
+      const resourceFilters = mountWithApp(<Filters {...mockProps} />);
+
+      resourceFilters
+        .find(Button, {children: 'More filters'})!
+        .trigger('onClick');
+
+      resourceFilters
+        .find('button', {id: 'filterOneToggleButton'})!
+        .trigger('onClick');
+
+      expect(
+        resourceFilters.find(Collapsible, {id: 'filterOneCollapsible'})!,
+      ).toContainReactComponent(Focus, {
+        disabled: true,
+      });
+
+      resourceFilters.find(Collapsible)!.trigger('onAnimationEnd');
+
+      expect(
+        resourceFilters.find(Collapsible, {id: 'filterOneCollapsible'})!,
+      ).toContainReactComponent(Focus, {
+        disabled: false,
+      });
+    });
+  });
 });
 
 function noop() {}