fix: Fixed issue about note UUID not being selectable in menu

packages/web/src/javascripts/Components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef, KeyboardEventHandler, ReactNode, Ref, useCallback, useEffect, useRef } from 'react'
+import { CSSProperties, forwardRef, KeyboardEventHandler, ReactNode, Ref, useCallback, useRef } from 'react'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import { mergeRefs } from '@/Hooks/mergeRefs'
@@ -23,7 +23,6 @@ const Menu = forwardRef(
       style,
       a11yLabel,
       closeMenu,
-      isOpen,
       initialFocus,
       onKeyDown,
       shouldAutoFocus = true,
@@ -44,15 +43,7 @@ const Menu = forwardRef(
       [closeMenu, onKeyDown],
     )
 
-    useListKeyboardNavigation(menuElementRef, initialFocus)
-
-    useEffect(() => {
-      if (isOpen && shouldAutoFocus) {
-        setTimeout(() => {
-          menuElementRef.current?.focus()
-        }, 5)
-      }
-    }, [isOpen, shouldAutoFocus])
+    useListKeyboardNavigation(menuElementRef, initialFocus, shouldAutoFocus)
 
     return (
       <menu

packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -2,7 +2,11 @@ import { KeyboardKey } from '@standardnotes/ui-services'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { useCallback, useEffect, RefObject, useRef } from 'react'
 
-export const useListKeyboardNavigation = (container: RefObject<HTMLElement | null>, initialFocus = 0) => {
+export const useListKeyboardNavigation = (
+  container: RefObject<HTMLElement | null>,
+  initialFocus = 0,
+  shouldAutoFocus = false,
+) => {
   const listItems = useRef<HTMLButtonElement[]>([])
   const focusedItemIndex = useRef<number>(initialFocus)
 
@@ -69,13 +73,17 @@ export const useListKeyboardNavigation = (container: RefObject<HTMLElement | nul
     }, FIRST_ITEM_FOCUS_TIMEOUT)
   }, [container, focusItemWithIndex, initialFocus])
 
+  useEffect(() => {
+    if (shouldAutoFocus) {
+      containerFocusHandler()
+    }
+  }, [containerFocusHandler, shouldAutoFocus])
+
   useEffect(() => {
     const containerElement = container.current
-    containerElement?.addEventListener('focus', containerFocusHandler)
     containerElement?.addEventListener('keydown', keyDownHandler)
 
     return () => {
-      containerElement?.removeEventListener('focus', containerFocusHandler)
       containerElement?.removeEventListener('keydown', keyDownHandler)
     }
   }, [container, containerFocusHandler, keyDownHandler])