[website] Fix strange focus-visible on hover (mui#42924)

joserodolfofreitas · Jul 29, 2024 · b46e030 · b46e030
1 parent 556311a
commit b46e030
Showing 1 changed file with 49 additions and 31 deletions.
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -129,13 +129,19 @@ export default function HeaderNavBar() {
   const [subMenuOpen, setSubMenuOpen] = React.useState<null | 'products' | 'docs'>(null);
   const [subMenuIndex, setSubMenuIndex] = React.useState<number | null>(null);
   const navRef = React.useRef<HTMLUListElement | null>(null);
+  const productSelectorRef = React.useRef<HTMLDivElement | null>(null);
   const productsMenuRef = React.useRef<HTMLButtonElement>(null);
   const docsMenuRef = React.useRef<HTMLButtonElement>(null);
+
   React.useEffect(() => {
-    if (typeof subMenuIndex === 'number') {
-      document.getElementById(PRODUCT_IDS[subMenuIndex])?.focus();
+    if (typeof subMenuIndex === 'number' && subMenuOpen === 'products') {
+      document.getElementById(PRODUCT_IDS[subMenuIndex])!.focus();
+    }
+
+    if (typeof subMenuIndex === 'number' && subMenuOpen === 'docs') {
+      (productSelectorRef.current!.querySelector('[role="menuitem"]') as HTMLElement).focus();
     }
-  }, [subMenuIndex]);
+  }, [subMenuIndex, subMenuOpen]);
 
   function handleKeyDown(event: React.KeyboardEvent) {
     let menuItem;
@@ -148,31 +154,37 @@ export default function HeaderNavBar() {
       return;
     }
 
-    if (event.key === 'ArrowDown' && subMenuOpen === 'products') {
+    if (event.key === 'ArrowDown') {
       event.preventDefault();
-      setSubMenuIndex((prevValue) => {
-        if (prevValue === null) {
-          return 0;
-        }
-        if (prevValue === PRODUCT_IDS.length - 1) {
-          return 0;
-        }
-        return prevValue + 1;
-      });
-    }
-    if (event.key === 'ArrowUp' && subMenuOpen === 'products') {
+      if (subMenuOpen === 'products') {
+        setSubMenuIndex((prevValue) => {
+          if (prevValue === null) {
+            return 0;
+          }
+          if (prevValue === PRODUCT_IDS.length - 1) {
+            return 0;
+          }
+          return prevValue + 1;
+        });
+      } else if (subMenuOpen === 'docs') {
+        setSubMenuIndex(0);
+      }
+    } else if (event.key === 'ArrowUp') {
       event.preventDefault();
-      setSubMenuIndex((prevValue) => {
-        if (prevValue === null) {
-          return 0;
-        }
-        if (prevValue === 0) {
-          return PRODUCT_IDS.length - 1;
-        }
-        return prevValue - 1;
-      });
-    }
-    if (event.key === 'Escape' || event.key === 'Tab') {
+      if (subMenuOpen === 'products') {
+        setSubMenuIndex((prevValue) => {
+          if (prevValue === null) {
+            return 0;
+          }
+          if (prevValue === 0) {
+            return PRODUCT_IDS.length - 1;
+          }
+          return prevValue - 1;
+        });
+      } else if (subMenuOpen === 'docs') {
+        setSubMenuIndex(0);
+      }
+    } else if (event.key === 'Escape' || event.key === 'Tab') {
       menuItem.focus();
       setSubMenuOpen(null);
       setSubMenuIndex(null);
@@ -184,10 +196,16 @@ export default function HeaderNavBar() {
     [setSubMenuOpen],
   );
 
-  const setSubMenuOpenUndebounce = (value: typeof subMenuOpen) => () => {
-    setSubMenuOpenDebounced.clear();
-    setSubMenuOpen(value);
-  };
+  const setSubMenuOpenUndebounce =
+    (value: typeof subMenuOpen) => (event: React.MouseEvent | React.FocusEvent) => {
+      setSubMenuOpenDebounced.clear();
+      setSubMenuOpen(value);
+
+      if (event.type === 'mouseenter') {
+        // Reset keyboard
+        setSubMenuIndex(null);
+      }
+    };
 
   const handleClickMenu = (value: typeof subMenuOpen) => () => {
     setSubMenuOpenDebounced.clear();
@@ -353,7 +371,7 @@ export default function HeaderNavBar() {
                     }),
                   })}
                 >
-                  <MuiProductSelector autoFocusItem={subMenuOpen === 'docs'} />
+                  <MuiProductSelector ref={productSelectorRef} />
                 </Paper>
               </Fade>
             )}