Fixing keyboard navigation bug.

js-src/components/overlay-controls.tsx

@@ -3,7 +3,6 @@ import { HOME_BUTTON_IMAGE } from '@msgba/constants'
 import { sendKeyDown } from '@msgba/packet'
 
 export interface OverlayControlsProps {
-    firstMenuElement: React.RefObject<HTMLAnchorElement>
     controlsRef: React.RefObject<HTMLDivElement>
     setHiddenMenu: (c: boolean) => void
     webSocket: WebSocket | null
@@ -20,7 +19,7 @@ interface ControlValue {
 
 type ControlMap = Record<string, ControlValue>
 
-export default function OverlayControls ({ firstMenuElement, setHiddenMenu, webSocket, controlsRef }: OverlayControlsProps): JSX.Element {
+export default function OverlayControls ({ setHiddenMenu, webSocket, controlsRef }: OverlayControlsProps): JSX.Element {
     function showOverlayMenu (): void {
         setHiddenMenu(false)
     }

js-src/components/overlay-menu.tsx

@@ -10,7 +10,7 @@ export interface OverlayMenuProps {
     screenRef: React.RefObject<HTMLDivElement>
     isFullscreen: boolean
     setIsFullscreen: (c: boolean) => void
-    firstMenuElement: React.RefObject<HTMLAnchorElement>
+    overlayMenu: React.RefObject<HTMLDivElement>
     websocket: WebSocket | null
     onSaveResponseLambdas: Map<bigint, (saveFile: Uint8Array) => void>
 };
@@ -20,7 +20,7 @@ type Style = Record<string, string>
 export default function OverlayMenu ({
     hiddenMenu, setHiddenMenu, emulationStarted,
     setHiddenFormSelectFiles, screenRef, isFullscreen, setIsFullscreen,
-    firstMenuElement, websocket, onSaveResponseLambdas
+    overlayMenu, websocket, onSaveResponseLambdas
 }: OverlayMenuProps): JSX.Element {
     function exitMenu (): void {
         setHiddenMenu(true)
@@ -101,9 +101,9 @@ export default function OverlayMenu ({
             <div className="overlay-menu-div-header">
                 <CloseButton onClick={exitMenu}/>
             </div>
-            <div className="overlay-menu">
+            <div className="overlay-menu" ref={overlayMenu}>
                 <ul>
-                    <li><a ref={firstMenuElement} style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
+                    <li><a style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
                     <li><a ref={saveButton} style={styleSave} onClick={onSave} href="#">Save</a></li>
                     <li><a onClick={toggleFullscreen} href="#">{toggleFullscreenText}</a></li>
                     <li><a href="#" onClick={exitMenu}>Exit</a></li>

js-src/components/page.tsx

@@ -102,8 +102,16 @@ export default function Page (): JSX.Element {
                 return
             }
             if (!hiddenMenu) {
-                if (firstMenuElement.current != null) {
-                    firstMenuElement.current.focus()
+                if (overlayMenu.current == null) {
+                    return
+                }
+                const allAnchors = overlayMenu.current.querySelectorAll('a')
+                for (const anchor of allAnchors) {
+                    if (anchor.style.display === 'none') {
+                        continue
+                    }
+                    anchor.focus()
+                    break
                 }
                 return
             }
@@ -177,18 +185,18 @@ export default function Page (): JSX.Element {
     const onStartEmulation = (e: React.MouseEvent<HTMLInputElement>): void => {
         handleClickStartEmulationButton(e)
     }
-    const firstMenuElement = React.useRef<HTMLAnchorElement>(null)
+    const overlayMenu = React.useRef<HTMLDivElement>(null)
     const screenRef = React.useRef<HTMLDivElement>(null)
     const [isFullscreen, setIsFullscreen] = React.useState<boolean>(false)
     return (
         <div ref={screenRef}>
-            <OverlayControls controlsRef={controlsRef} firstMenuElement={firstMenuElement}
+            <OverlayControls controlsRef={controlsRef}
                 setHiddenMenu={setHiddenMenu} webSocket={webSocket}/>
             <OverlayMenu hiddenMenu={hiddenMenu}
                 setHiddenMenu={setHiddenMenu} emulationStarted={emulationStarted}
                 setHiddenFormSelectFiles={setHiddenFormSelectFiles} screenRef={screenRef}
                 isFullscreen={isFullscreen} setIsFullscreen={setIsFullscreen}
-                firstMenuElement={firstMenuElement} websocket={webSocket}
+                overlayMenu={overlayMenu} websocket={webSocket}
                 onSaveResponseLambdas={onSaveResponseLambdas}/>
             <OverlaySelectFiles hiddenFormSelectFiles={hiddenFormSelectFiles}
                 setHiddenFormSelectFiles={setHiddenFormSelectFiles}