From a88dfbe7ba7acc470a05b348ca5be5ca29172a83 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 14 Jul 2024 01:58:36 +0200
Subject: [PATCH] [website] Fix strange focus-visible on hover

---
 docs/src/components/header/HeaderNavBar.tsx | 73 +++++++++++++--------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index 9e7f4a0484d4c9..0068e1c9ffb300 100644
--- 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,9 +196,14 @@ export default function HeaderNavBar() {
     [setSubMenuOpen],
   );
 
-  const setSubMenuOpenUndebounce = (value: typeof subMenuOpen) => () => {
+  const setSubMenuOpenUndebounce = (value: typeof subMenuOpen) => (event: Event) => {
     setSubMenuOpenDebounced.clear();
     setSubMenuOpen(value);
+
+    if (event.type === 'mouseenter') {
+      // Reset keyboard
+      setSubMenuIndex(null);
+    }
   };
 
   const handleClickMenu = (value: typeof subMenuOpen) => () => {
@@ -353,7 +370,7 @@ export default function HeaderNavBar() {
                     }),
                   })}
                 >
-                  <MuiProductSelector autoFocusItem={subMenuOpen === 'docs'} />
+                  <MuiProductSelector ref={productSelectorRef} />
                 </Paper>
               </Fade>
             )}