refactor: conditional focus of flyout menu

dhis2 · Jun 30, 2024 · 3a6e749 · 3a6e749
1 parent f31fd08
commit 3a6e749
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/components/menu/src/flyout-menu/flyout-menu.js b/components/menu/src/flyout-menu/flyout-menu.js
@@ -26,23 +26,26 @@ const FlyoutMenu = ({
 
     const divRef = useRef(null)
 
-    const handleFocus = (event) => {
-        if (event.target === divRef.current) {
-            divRef.current.children[0].focus()
-        }
-    }
-
     useEffect(() => {
-        if (!divRef) {
+        if (!divRef.current) {
             return
         }
         const div = divRef.current
+
+        const handleFocus = (event) => {
+            if (event.target === div) {
+                if (div.children && div.children.length > 0) {
+                    div.children[0].focus()
+                }
+            }
+        }
+
         div.addEventListener('focus', handleFocus)
 
         return () => {
             div.removeEventListener('focus', handleFocus)
         }
-    })
+    }, [])
 
     return (
         <div