fix: 15524-overflow-menu-focus-bug (#15833)

* fix: 15524-overflow-menu-focus-bug * chore: remove comments * chore: update tests * Update OverflowMenu-test.avt.e2e.js
carbon-design-system · Mar 13, 2024 · 3405a2d · 3405a2d
1 parent 9a4ed97
commit 3405a2d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/e2e/components/OverflowMenu/OverflowMenu-test.avt.e2e.js b/e2e/components/OverflowMenu/OverflowMenu-test.avt.e2e.js
@@ -73,7 +73,7 @@ test.describe('@avt OverflowMenu', () => {
     await expect(page).toHaveNoACViolations('OverflowMenu-custom-icon-open');
   });
 
-  test('@avt-keyboard-nav overflow-menu', async ({ page }) => {
+  test.slow('@avt-keyboard-nav overflow-menu', async ({ page }) => {
     await visitStory(page, {
       component: 'OverflowMenu',
       id: 'components-overflowmenu--default',
@@ -98,7 +98,7 @@ test.describe('@avt OverflowMenu', () => {
       page.locator('button').filter({ hasText: 'Restart app' })
     ).toBeFocused();
     await page.keyboard.press('Enter');
-    // focus comes back to the toggle button
-    await expect(toggleButton).toBeFocused();
+    // Once closed menu is no longer visibile
+    await expect(page.getByRole('menu')).not.toBeVisible();
   });
 });
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -293,6 +293,7 @@ class OverflowMenu extends Component {
 
   handleClick = (evt) => {
     const { onClick = noopFn } = this.props;
+    this.setState({ click: true });
     evt.stopPropagation();
     if (!this._menuBody || !this._menuBody.contains(evt.target)) {
       this.setState({ open: !this.state.open });
@@ -301,6 +302,16 @@ class OverflowMenu extends Component {
   };
 
   closeMenuAndFocus = () => {
+    let wasClicked = this.state.click;
+    let wasOpen = this.state.open;
+    this.closeMenu(() => {
+      if (wasOpen && !wasClicked) {
+        this.focusMenuEl();
+      }
+    });
+  };
+
+  closeMenuOnEscape = () => {
     let wasOpen = this.state.open;
     this.closeMenu(() => {
       if (wasOpen) {
@@ -324,7 +335,7 @@ class OverflowMenu extends Component {
 
     // Close the overflow menu on escape
     if (keyCodeMatches(evt, [keys.Escape])) {
-      this.closeMenuAndFocus();
+      this.closeMenuOnEscape();
 
       // Stop the esc keypress from bubbling out and closing something it shouldn't
       evt.stopPropagation();