fix(components): context menu keyboard navigation (#5767)

codesandbox · May 14, 2021 · ef793e7 · ef793e7
1 parent 4704c7b
commit ef793e7
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/packages/components/src/components/Menu/index.tsx b/packages/components/src/components/Menu/index.tsx
@@ -148,6 +148,15 @@ const ContextMenu = ({ visible, setVisibility, position, ...props }) => {
   const [computedMenuWidth, setComputedMenuWidth] = React.useState<number>(0);
   const [menuIsReadyToShow, setMenuIsReadyToShow] = React.useState(false);
 
+  // enables keyboard navigation
+  React.useEffect(() => {
+    setTimeout(() => {
+      if (!visible && !menuRef.current) return;
+      menuRef.current.focus();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, menuRef.current]);
+
   React.useEffect(() => {
     // for the initial render, the menu is not ready to be shown
     // because the element height cannot be computed