From 23183fcf1dc89f216f4ec0e5ad5c7d56ac136035 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 1 Nov 2022 12:53:45 +1100
Subject: [PATCH] fix ContextMenu not keyboard accessible

---
 src/components/Table/ContextMenu/ContextMenu.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Table/ContextMenu/ContextMenu.tsx b/src/components/Table/ContextMenu/ContextMenu.tsx
index a8ad0725..9eaf4472 100644
--- a/src/components/Table/ContextMenu/ContextMenu.tsx
+++ b/src/components/Table/ContextMenu/ContextMenu.tsx
@@ -1,3 +1,4 @@
+import { useRef, useEffect } from "react";
 import { useAtom } from "jotai";
 import { ErrorBoundary } from "react-error-boundary";
 import { NonFullScreenErrorFallback } from "@src/components/ErrorFallback";
@@ -8,10 +9,21 @@ import MenuContents from "./MenuContents";
 import { tableScope, contextMenuTargetAtom } from "@src/atoms/tableScope";
 
 export default function ContextMenu() {
+  const menuRef = useRef<HTMLUListElement>(null);
   const [contextMenuTarget, setContextMenuTarget] = useAtom(
     contextMenuTargetAtom,
     tableScope
   );
+  const open = Boolean(contextMenuTarget);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (open && menuRef.current) {
+        const firstMenuitem = menuRef.current.querySelector("[role=menuitem]");
+        (firstMenuitem as HTMLElement)?.focus();
+      }
+    });
+  }, [open]);
 
   const handleClose = () => setContextMenuTarget(null);
 
@@ -20,11 +32,12 @@ export default function ContextMenu() {
       id="cell-context-menu"
       aria-label="Cell context menu"
       anchorEl={contextMenuTarget as any}
-      open={Boolean(contextMenuTarget)}
+      open={open}
       onClose={handleClose}
       anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
       transformOrigin={{ vertical: "top", horizontal: "left" }}
       sx={{ "& .MuiMenu-paper": { minWidth: 160 } }}
+      MenuListProps={{ ref: menuRef }}
     >
       <ErrorBoundary FallbackComponent={NonFullScreenErrorFallback}>
         <MenuContents onClose={handleClose} />