diff --git a/src/Explorer/Sidebar.tsx b/src/Explorer/Sidebar.tsx index a6a0e6a3e..8b96b0422 100644 --- a/src/Explorer/Sidebar.tsx +++ b/src/Explorer/Sidebar.tsx @@ -26,7 +26,7 @@ import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils"; import { Allotment, AllotmentHandle } from "allotment"; import { useSidePanel } from "hooks/useSidePanel"; import { debounce } from "lodash"; -import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; const useSidebarStyles = makeStyles({ sidebar: { @@ -109,6 +109,7 @@ interface GlobalCommand { icon: JSX.Element; onClick: () => void; keyboardAction?: KeyboardAction; + ref?: React.RefObject; } const GlobalCommands: React.FC = ({ explorer }) => { @@ -118,6 +119,7 @@ const GlobalCommands: React.FC = ({ explorer }) => { // However, that messes with the Menu positioning, so we need to get a reference to the 'div' to pass to the Menu. // We can't use a ref though, because it would be set after the Menu is rendered, so we use a state value to force a re-render. const [globalCommandButton, setGlobalCommandButton] = useState(null); + const primaryFocusableRef = useRef(null); const actions = useMemo(() => { if ( @@ -177,6 +179,16 @@ const GlobalCommands: React.FC = ({ explorer }) => { ); }, [actions, setKeyboardActions]); + useLayoutEffect(() => { + if (primaryFocusableRef.current) { + const timer = setTimeout(() => { + primaryFocusableRef.current.focus(); + }, 0); + return () => clearTimeout(timer); + } + return undefined; + }, []); + if (!primaryAction) { return null; } @@ -184,7 +196,7 @@ const GlobalCommands: React.FC = ({ explorer }) => { return (
{actions.length === 1 ? ( - ) : ( @@ -194,7 +206,7 @@ const GlobalCommands: React.FC = ({ explorer }) => {