fix: Fixed issue where the first item in item link autcomplete would not be correctly focused (skip e2e)

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

@@ -1,4 +1,12 @@
-import { CSSProperties, forwardRef, KeyboardEventHandler, ReactNode, Ref, useCallback, useRef } from 'react'
+import {
+  CSSProperties,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import { mergeRefs } from '@/Hooks/mergeRefs'
@@ -27,7 +35,7 @@ const Menu = forwardRef(
       onKeyDown,
       shouldAutoFocus = true,
     }: MenuProps,
-    forwardedRef: Ref<HTMLMenuElement>,
+    forwardedRef,
   ) => {
     const menuElementRef = useRef<HTMLMenuElement>(null)
 
@@ -43,7 +51,13 @@ const Menu = forwardRef(
       [closeMenu, onKeyDown],
     )
 
-    useListKeyboardNavigation(menuElementRef, initialFocus, shouldAutoFocus)
+    const { setInitialFocus } = useListKeyboardNavigation(menuElementRef, initialFocus, shouldAutoFocus)
+
+    useImperativeHandle(forwardedRef, () => ({
+      focus: () => {
+        setInitialFocus()
+      },
+    }))
 
     return (
       <menu

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

@@ -57,7 +57,7 @@ export const useListKeyboardNavigation = (
 
   const FIRST_ITEM_FOCUS_TIMEOUT = 20
 
-  const containerFocusHandler = useCallback(() => {
+  const setInitialFocus = useCallback(() => {
     const items = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
     listItems.current = items
 
@@ -75,9 +75,9 @@ export const useListKeyboardNavigation = (
 
   useEffect(() => {
     if (shouldAutoFocus) {
-      containerFocusHandler()
+      setInitialFocus()
     }
-  }, [containerFocusHandler, shouldAutoFocus])
+  }, [setInitialFocus, shouldAutoFocus])
 
   useEffect(() => {
     const containerElement = container.current
@@ -86,5 +86,9 @@ export const useListKeyboardNavigation = (
     return () => {
       containerElement?.removeEventListener('keydown', keyDownHandler)
     }
-  }, [container, containerFocusHandler, keyDownHandler])
+  }, [container, setInitialFocus, keyDownHandler])
+
+  return {
+    setInitialFocus,
+  }
 }