diff --git a/packages/web/src/javascripts/Components/Menu/Menu.tsx b/packages/web/src/javascripts/Components/Menu/Menu.tsx index 6a66fd20e..325f57458 100644 --- a/packages/web/src/javascripts/Components/Menu/Menu.tsx +++ b/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 ( , initialFocus = 0) => { +export const useListKeyboardNavigation = ( + container: RefObject, + initialFocus = 0, + shouldAutoFocus = false, +) => { const listItems = useRef([]) const focusedItemIndex = useRef(initialFocus) @@ -69,13 +73,17 @@ export const useListKeyboardNavigation = (container: RefObject { + 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])