fix(react): uishell headermenu blur handler (#14616)

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
carbon-design-system · Sep 12, 2023 · 7d95369 · 7d95369
1 parent 149fc26
commit 7d95369
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1241,6 +1241,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "cordesmj",
+      "name": "cordesmj",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7409239?v=4",
+      "profile": "https://github.com/cordesmj",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -251,6 +251,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/djragsdale"><img src="https://avatars.githubusercontent.com/u/4396766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Ragsdale</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=djragsdale" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/haocheng6"><img src="https://avatars.githubusercontent.com/u/7645930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hao Cheng</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=haocheng6" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/cordesmj"><img src="https://avatars.githubusercontent.com/u/7409239?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cordesmj</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cordesmj" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -136,25 +136,22 @@ class HeaderMenu extends React.Component {
 
   /**
    * Handle our blur event from our underlying menuitems. Will mostly be used
-   * for toggling the expansion status of our menu in response to a user
-   * clicking off of the menu or menubar.
+   * for closing our menu in response to a user clicking off or tabbing out of
+   * the menu or menubar.
    */
   handleOnBlur = (event) => {
-    // Rough guess for a blur event that is triggered outside of our menu or
-    // menubar context
-    const itemTriggeredBlur = this.items.find(
+    // Close the menu on blur when the related target is not a sibling menu item
+    // or a child in a submenu
+    const siblingItemBlurredTo = this.items.find(
       (element) => element === event.relatedTarget
     );
-    if (
-      event.relatedTarget &&
-      ((event.relatedTarget.getAttribute('href') &&
-        event.relatedTarget.getAttribute('href') !== '#') ||
-        itemTriggeredBlur)
-    ) {
-      return;
-    }
+    const childItemBlurredTo = this._subMenus.current?.contains(
+      event.relatedTarget
+    );
 
-    this.setState({ expanded: false, selectedIndex: null });
+    if (!siblingItemBlurredTo && !childItemBlurredTo) {
+      this.setState({ expanded: false, selectedIndex: null });
+    }
   };
 
   /**