fix(dropdowns): ensure focus is returned to menu trigger before calling onChange (#1930)

Author: ze-flo

docs/migration.md

@@ -118,7 +118,12 @@ consider additional positioning prop support on a case-by-case basis.
 - Use this package if you were using `@zendeskgarden/react-dropdowns.next` in `v8`
   - The `v8` version of `@zendeskgarden/react-dropdowns` is no longer maintained and is
     renamed to `@zendeskgarden/react-dropdowns.legacy` in `v9`
-- `Menu`: value `auto` is no longer valid for the `fallbackPlacements` prop.
+- `Menu`
+  - value `auto` is no longer valid for the `fallbackPlacements` prop.
+  - new `restoreFocus` prop (default: `true`) returns focus to trigger
+    after menu interaction. When menu expansion is controlled to allow
+    multiple item selection, set `restoreFocus={false}` and manage trigger
+    focus manually on close.
 - Removed `label` prop from `OptGroup`. Use `legend` instead.
 
 #### @zendeskgarden/react-forms

package-lock.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-combobox": "^2.0.0",
-    "@zendeskgarden/container-menu": "^0.4.0",
+    "@zendeskgarden/container-menu": "^0.5.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/react-buttons": "^9.0.0-next.26",
     "@zendeskgarden/react-forms": "^9.0.0-next.26",

packages/dropdowns/package.json

@@ -132,9 +132,9 @@ describe('Menu', () => {
     expect(item).toBeVisible();
   });
 
-  it('applies `defaultFocusedValue`', async () => {
-    const { getByTestId } = render(
-      <TestMenu defaultExpanded defaultFocusedValue="Cactus">
+  it('applies `defaultFocusedValue` after a keyboard event opens the menu', async () => {
+    const { getByTestId, getByRole } = render(
+      <TestMenu defaultFocusedValue="Cactus">
         <Item value="Flower" data-test-id="item-01">
           Flower
           <Item.Meta>Smooth</Item.Meta>
@@ -148,8 +148,22 @@ describe('Menu', () => {
     );
 
     await floating();
+    const trigger = getByRole('button');
+
+    // open menu with onClick
+    await user.click(trigger);
     const item = getByTestId('item-02');
+    // focus remains on trigger with mouseEvents
+    expect(trigger).toHaveFocus();
 
+    // close menu
+    await user.click(trigger);
+    expect(item).not.toBeVisible();
+
+    // open menu with keyboard
+    trigger.focus();
+    await user.keyboard(' ');
+    // focus is on the focused item associated with `defaultFocusedValue`
     expect(item).toHaveFocus();
   });
 
@@ -603,14 +617,15 @@ describe('Menu', () => {
     });
 
     it('calls onChange as expected', async () => {
-      const { getByTestId } = render(
+      const { getByRole, getByTestId } = render(
         <TestMenu isExpanded focusedValue="Cactus" onChange={handleChange}>
           <Item value="Flower" data-test-id="flower" />
           <Item value="Cactus" />
         </TestMenu>
       );
 
       await floating();
+      const trigger = getByRole('button');
       const item1 = getByTestId('flower');
 
       await act(async () => {
@@ -620,6 +635,7 @@ describe('Menu', () => {
       const changeTypes = handleChange.mock.calls.map(([change]) => change.type);
 
       expect(changeTypes).toMatchObject(['menuItem:mouseMove', 'menuItem:click']);
+      expect(trigger).toHaveFocus();
     });
 
     it('handles `focusedValue` and `isExpanded` as expected', async () => {

packages/dropdowns/src/elements/menu/Menu.spec.tsx

@@ -32,6 +32,7 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
       defaultFocusedValue,
       defaultExpanded,
       isExpanded: _isExpanded,
+      restoreFocus,
       selectedItems,
       onChange,
       onMouseLeave,
@@ -61,6 +62,7 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
       focusedValue: _focusedValue,
       defaultExpanded,
       isExpanded: _isExpanded,
+      restoreFocus,
       selectedItems,
       items,
       menuRef,

packages/dropdowns/src/elements/menu/Menu.tsx

@@ -269,6 +269,8 @@ export interface IMenuProps extends HTMLAttributes<HTMLUListElement> {
    * @param {string | null} [changes.focusedValue] The updated focused value
    */
   onChange?: IUseMenuProps['onChange'];
+  /** Returns keyboard focus to the element that triggered the menu */
+  restoreFocus?: IUseMenuProps['restoreFocus'];
   /** Sets the selected items in a controlled menu */
   selectedItems?: IUseMenuProps['selectedItems'];
   /** Adjusts the placement of the menu */