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, + forwardedRef, ) => { const menuElementRef = useRef(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 ( { + const setInitialFocus = useCallback(() => { const items = Array.from(container.current?.querySelectorAll('button') as NodeListOf) 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, + } }