fix: only stop onKeyDown propagation from menu when enter or escaped are pressed

Former-commit-id: 5ecd666

Author: decaf-dev

src/react/loom-app/app/hooks/use-focus/index.tsx

@@ -43,7 +43,7 @@ export default function useFocus() {
 			if (focusableEls.length === 0) return;
 
 			focusNextElement(menuEl, focusableEls);
-		} else if (isArrowKeyPressed(e, topMenu === null)) {
+		} else if (isArrowKeyPressed(e, topMenu !== null)) {
 			const layerEl = getTopMenuEl(topMenu, reactAppId);
 			if (!layerEl) return;
 

src/react/loom-app/app/hooks/use-focus/utils.ts

@@ -83,15 +83,15 @@ export const getNumBottomBarFocusableEl = (appEl: HTMLElement) => {
 
 export const isArrowKeyPressed = (
 	e: React.KeyboardEvent,
-	hasTopMenu: boolean
+	isMenuOpen: boolean
 ) => {
-	if (hasTopMenu) {
-		return (
-			e.key === "ArrowDown" ||
-			e.key === "ArrowUp" ||
-			e.key === "ArrowLeft" ||
-			e.key === "ArrowRight"
-		);
+	if (isMenuOpen) {
+		return e.key === "ArrowDown" || e.key === "ArrowUp";
 	}
-	return e.key === "ArrowDown" || e.key === "ArrowUp";
+	return (
+		e.key === "ArrowDown" ||
+		e.key === "ArrowUp" ||
+		e.key === "ArrowLeft" ||
+		e.key === "ArrowRight"
+	);
 };

src/react/shared/menu/base-menu.tsx

@@ -42,13 +42,16 @@ const BaseMenu = React.forwardRef<HTMLDivElement, Props>(
 		const logger = useLogger();
 
 		function handleKeyDown(e: React.KeyboardEvent) {
-			//Don't propagate to the app
-			e.stopPropagation();
-
 			logger("Menu handleKeyDown");
 			if (e.key === "Enter") {
+				//Don't propagate the enter event to the app
+				//it will close all menus
+				e.stopPropagation();
 				onRequestClose("close-on-save");
 			} else if (e.key === "Escape") {
+				//Don't propagate the enter event to the app
+				//it will close all menus
+				e.stopPropagation();
 				onClose();
 			}
 		}