diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js index a8c21ee1d..c29255bef 100644 --- a/ui/src/Components/NavBar/FilterInput/index.js +++ b/ui/src/Components/NavBar/FilterInput/index.js @@ -14,6 +14,7 @@ import { Settings } from "Stores/Settings"; import { IsMobile } from "Common/Device"; import { useFetchGet } from "Hooks/useFetchGet"; import { useDebounce } from "Hooks/useDebounce"; +import { useOnClickOutside } from "Hooks/useOnClickOutside"; import { FilterInputLabel } from "Components/Labels/FilterInputLabel"; import { AutosuggestTheme } from "./Constants"; import { History } from "./History"; @@ -21,6 +22,7 @@ import { History } from "./History"; const FilterInput = ({ alertStore, settingsStore }) => { const autosuggestRef = useRef(); const inputRef = useRef(); + const formRef = useRef(null); const [suggestions, setSuggestions] = useState([]); const [value, setValue] = useState(""); @@ -56,6 +58,9 @@ const FilterInput = ({ alertStore, settingsStore }) => { } }, []); + const onBlur = useCallback(() => setIsFocused(false), []); + useOnClickOutside(formRef, onBlur, true); + const [term, setTerm] = useState(""); const debouncedSearchTerm = useDebounce(term, 300); @@ -116,6 +121,7 @@ const FilterInput = ({ alertStore, settingsStore }) => { // in order to re-render input component