diff --git a/airflow/ui/src/components/SearchBar.tsx b/airflow/ui/src/components/SearchBar.tsx index 349b66ce9e2e6..5a55b6a2f96c0 100644 --- a/airflow/ui/src/components/SearchBar.tsx +++ b/airflow/ui/src/components/SearchBar.tsx @@ -16,11 +16,14 @@ * specific language governing permissions and limitations * under the License. */ -import { Button, Input, type ButtonProps } from "@chakra-ui/react"; -import { useState, type ChangeEvent } from "react"; +import { Button, Input, Kbd, type ButtonProps } from "@chakra-ui/react"; +import { useState, useRef, type ChangeEvent } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; import { FiSearch } from "react-icons/fi"; import { useDebouncedCallback } from "use-debounce"; +import { getMetaKey } from "src/utils"; + import { CloseButton, InputGroup, type InputGroupProps } from "./ui"; const debounceDelay = 200; @@ -43,14 +46,23 @@ export const SearchBar = ({ placeHolder, }: Props) => { const handleSearchChange = useDebouncedCallback((val: string) => onChange(val), debounceDelay); - + const searchRef = useRef(null); const [value, setValue] = useState(defaultValue); + const metaKey = getMetaKey(); const onSearchChange = (event: ChangeEvent) => { setValue(event.target.value); handleSearchChange(event.target.value); }; + useHotkeys( + "mod+k", + () => { + searchRef.current?.focus(); + }, + { preventDefault: true }, + ); + return ( )} + {metaKey}+K } startElement={} @@ -83,6 +96,7 @@ export const SearchBar = ({ onChange={onSearchChange} placeholder={placeHolder} pr={150} + ref={searchRef} value={value} />