fix(UIShell): loss of focus on menu (new) (#13796)

* fix(UIShell): new branch to fix merge problems * test(snapshot): fix snapshots
carbon-design-system · May 15, 2023 · ffdce9a · ffdce9a
1 parent 8548b83
commit ffdce9a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6544,6 +6544,9 @@ Map {
       "onOverlayClick": Object {
         "type": "func",
       },
+      "onSideNavBlur": Object {
+        "type": "func",
+      },
       "onToggle": Object {
         "type": "func",
       },

diff --git a/packages/react/src/components/UIShell/HeaderContainer.tsx b/packages/react/src/components/UIShell/HeaderContainer.tsx
@@ -28,7 +28,7 @@ export default function HeaderContainer({
   const [isSideNavExpandedState, setIsSideNavExpandedState] =
     useState(isSideNavExpanded);
 
-  useWindowEvent('keydown', (event) => {
+  useWindowEvent('keydown', (event: KeyboardEvent) => {
     if (match(event, keys.Escape)) {
       setIsSideNavExpandedState(false);
     }

diff --git a/packages/react/src/components/UIShell/SideNav.tsx b/packages/react/src/components/UIShell/SideNav.tsx
@@ -40,6 +40,7 @@ interface SideNavProps extends ComponentProps<'nav'> {
   addFocusListeners?: boolean | undefined;
   addMouseListeners?: boolean | undefined;
   onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
+  onSideNavBlur?: () => void | undefined;
 }
 
 function SideNavRenderFunction(
@@ -61,6 +62,7 @@ function SideNavRenderFunction(
     addFocusListeners = true,
     addMouseListeners = true,
     onOverlayClick,
+    onSideNavBlur,
     ...other
   }: SideNavProps,
   ref: ForwardedRef<HTMLElement>
@@ -151,6 +153,11 @@ function SideNavRenderFunction(
       if (!event.currentTarget.contains(event.relatedTarget)) {
         handleToggle(event, false);
       }
+      if (!event.currentTarget.contains(event.relatedTarget) && expanded) {
+        if (onSideNavBlur) {
+          onSideNavBlur();
+        }
+      }
     };
     eventHandlers.onKeyDown = (event) => {
       if (match(event, keys.Escape)) {
@@ -254,6 +261,12 @@ SideNav.propTypes = {
    */
   onOverlayClick: PropTypes.func,
 
+  /**
+   * An optional listener that is called a callback to collapse the SideNav
+   */
+
+  onSideNavBlur: PropTypes.func,
+
   /**
    * An optional listener that is called when an event that would cause
    * toggling the SideNav occurs.

diff --git a/packages/react/src/components/UIShell/UIShell.stories.js b/packages/react/src/components/UIShell/UIShell.stories.js
@@ -206,7 +206,8 @@ export const HeaderBaseWNavigation = () => (
         <SideNav
           aria-label="Side navigation"
           expanded={isSideNavExpanded}
-          isPersistent={false}>
+          isPersistent={false}
+          onSideNavBlur={onClickSideNavExpand}>
           <SideNavItems>
             <HeaderSideNavItems>
               <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
@@ -329,7 +330,8 @@ export const HeaderBaseWNavigationAndActions = () => (
         <SideNav
           aria-label="Side navigation"
           expanded={isSideNavExpanded}
-          isPersistent={false}>
+          isPersistent={false}
+          onSideNavBlur={onClickSideNavExpand}>
           <SideNavItems>
             <HeaderSideNavItems>
               <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
@@ -393,7 +395,10 @@ export const HeaderBaseWNavigationActionsAndSideNav = () => (
               <SwitcherIcon size={20} />
             </HeaderGlobalAction>
           </HeaderGlobalBar>
-          <SideNav aria-label="Side navigation" expanded={isSideNavExpanded}>
+          <SideNav
+            aria-label="Side navigation"
+            expanded={isSideNavExpanded}
+            onSideNavBlur={onClickSideNavExpand}>
             <SideNavItems>
               <HeaderSideNavItems hasDivider={true}>
                 <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
@@ -479,7 +484,10 @@ export const HeaderBaseWSideNav = () => (
           <HeaderName href="#" prefix="IBM">
             [Platform]
           </HeaderName>
-          <SideNav aria-label="Side navigation" expanded={isSideNavExpanded}>
+          <SideNav
+            aria-label="Side navigation"
+            expanded={isSideNavExpanded}
+            onSideNavBlur={onClickSideNavExpand}>
             <SideNavItems>
               <SideNavMenu renderIcon={Fade} title="Category title">
                 <SideNavMenuItem href="https://www.carbondesignsystem.com/">
@@ -901,7 +909,8 @@ export const SideNavRailWHeader = () => (
             isRail
             expanded={isSideNavExpanded}
             onOverlayClick={onClickSideNavExpand}
-            href="#main-content">
+            href="#main-content"
+            onSideNavBlur={onClickSideNavExpand}>
             <SideNavItems>
               <SideNavMenu renderIcon={Fade} title="Category title">
                 <SideNavMenuItem href="https://www.carbondesignsystem.com/">