diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx index 8a2d15216..319d91eb6 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx @@ -448,10 +448,12 @@ const DocumentsTabComponent: React.FunctionComponent<{ }) => { const [isFilterCreated, setIsFilterCreated] = useState(true); const [isFilterExpanded, setIsFilterExpanded] = useState(false); + const [isFilterFocused, setIsFilterFocused] = useState(false); const [appliedFilter, setAppliedFilter] = useState(""); const [filterContent, setFilterContent] = useState(""); const [documentIds, setDocumentIds] = useState([]); const [isExecuting, setIsExecuting] = useState(false); + const filterInput = useRef(null); // Query const [documentsIterator, setDocumentsIterator] = useState<{ @@ -487,6 +489,12 @@ const DocumentsTabComponent: React.FunctionComponent<{ const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB); + useEffect(() => { + if (isFilterFocused) { + filterInput.current?.focus(); + } + }, [isFilterFocused]); + let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC']; const applyFilterButton = { @@ -925,6 +933,7 @@ const DocumentsTabComponent: React.FunctionComponent<{ const onShowFilterClick = () => { setIsFilterCreated(true); setIsFilterExpanded(true); + setIsFilterFocused(true); }; const queryTimeoutEnabled = useCallback( @@ -1119,20 +1128,17 @@ const DocumentsTabComponent: React.FunctionComponent<{ } }; - const onFilterKeyDown = (model: unknown, e: KeyboardEvent): boolean => { + const onFilterKeyDown = (e: React.KeyboardEvent): void => { if (e.key === "Enter") { refreshDocumentsGrid(true); // Suppress the default behavior of the key - return false; + e.preventDefault(); } else if (e.key === "Escape") { onHideFilterClick(); // Suppress the default behavior of the key - return false; - } else { - // Allow the default behavior of the key - return true; + e.preventDefault(); } }; @@ -1644,7 +1650,7 @@ const DocumentsTabComponent: React.FunctionComponent<{ // collapse filter setAppliedFilter(filterContent); - setIsFilterExpanded(applyFilterButtonPressed); + setIsFilterExpanded(!applyFilterButtonPressed); document.getElementById("errorStatusIcon")?.focus(); } catch (error) { console.error(); @@ -1684,6 +1690,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
{!isPreferredApiMongoDB && SELECT * FROM c } setFilterContent(e.target.value)} + onBlur={() => setIsFilterFocused(false)} />