From df4148f82489dd04878c85fd9c459e5d9ad8a89b Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 19 Dec 2022 14:44:34 +0530
Subject: [PATCH] fix: Fixed issue where the first item in item link
 autcomplete would not be correctly focused (skip e2e)

---
 .../src/javascripts/Components/Menu/Menu.tsx  | 20 ++++++++++++++++---
 .../Hooks/useListKeyboardNavigation.ts        | 12 +++++++----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Menu/Menu.tsx b/packages/web/src/javascripts/Components/Menu/Menu.tsx
index 325f57458..ff096b1af 100644
--- a/packages/web/src/javascripts/Components/Menu/Menu.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts b/packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts
index e63c68e1b..1bffb53f1 100644
--- a/packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts
+++ b/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,
+  }
 }