diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx index 3dad6a81c..5d9a591c2 100644 --- a/src/navigation-bar.tsx +++ b/src/navigation-bar.tsx @@ -445,7 +445,7 @@ const MainNavigationBarDesktopMenuSectionColumn = ({ {column.title} - + {column.items.map(({title, ...touchableProps}, itemIdx) => (
{title} @@ -905,10 +906,12 @@ const MainNavigationBarDesktopSection = ({ React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { + const shouldReactOnArrowKeyPress = isArrowFocused || (menu && !hasCustomInteraction); + switch (e.key) { // If arrow is focused and DOWN key is pressed, open the menu if it was closed case DOWN: - if (isArrowFocused) { + if (shouldReactOnArrowKeyPress) { cancelEvent(e); openSectionMenu(); } @@ -916,7 +919,7 @@ const MainNavigationBarDesktopSection = ({ // If arrow is focused and UP key is pressed, close the menu if it was opened case UP: - if (isArrowFocused) { + if (shouldReactOnArrowKeyPress) { cancelEvent(e); setSectionAsInactive(index, true); } @@ -931,7 +934,7 @@ const MainNavigationBarDesktopSection = ({ return () => { document.removeEventListener('keydown', handleKeyDown, false); }; - }, [index, isArrowFocused, openSectionMenu, setSectionAsInactive]); + }, [index, isArrowFocused, openSectionMenu, setSectionAsInactive, menu, hasCustomInteraction]); // Close the menu when one of the rows is pressed const getInteractivePropsWithCloseMenu = React.useCallback( @@ -967,10 +970,12 @@ const MainNavigationBarDesktopSection = ({ { if (isArrowFocused) { if (index !== openedSection) {