diff --git a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx index 4aa2fb5be..41a6b26c0 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx +++ b/app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx @@ -1,4 +1,4 @@ -import React, { FC, useRef, useState } from "preact/compat"; +import React, { FC, useCallback, useEffect, useRef, useState } from "preact/compat"; import { KeyboardEvent } from "react"; import { ErrorTypes } from "../../../types"; import TextField from "../../Main/TextField/TextField"; @@ -7,8 +7,8 @@ import "./style.scss"; import { QueryStats } from "../../../api/types"; import { partialWarning, seriesFetchedWarning } from "./warningText"; import { AutocompleteOptions } from "../../Main/Autocomplete/Autocomplete"; -import { useQueryDispatch } from "../../../state/query/QueryStateContext"; import useDeviceDetect from "../../../hooks/useDeviceDetect"; +import { useQueryState } from "../../../state/query/QueryStateContext"; export interface QueryEditorProps { onChange: (query: string) => void; @@ -36,6 +36,7 @@ const QueryEditor: FC = ({ label, disabled = false }) => { + const { autocompleteQuick } = useQueryState(); const { isMobile } = useDeviceDetect(); const [openAutocomplete, setOpenAutocomplete] = useState(false); @@ -61,7 +62,7 @@ const QueryEditor: FC = ({ onChange(val); }; - const handleKeyDown = (e: KeyboardEvent) => { + const handleKeyDown = useCallback((e: KeyboardEvent) => { const { key, ctrlKey, metaKey, shiftKey } = e; const value = (e.target as HTMLTextAreaElement).value || ""; @@ -93,7 +94,7 @@ const QueryEditor: FC = ({ e.preventDefault(); onEnter(); } - }; + }, [openAutocomplete]); const handleChangeFoundOptions = (val: AutocompleteOptions[]) => { setOpenAutocomplete(!!val.length); @@ -103,6 +104,10 @@ const QueryEditor: FC = ({ setCaretPosition(val); }; + useEffect(() => { + setOpenAutocomplete(autocomplete); + }, [autocompleteQuick]); + return (
= ({ } }, [openAutocomplete, options, value]); + const hideFoundedOptions = useMemo(() => { + return foundOptions.length === 1 && foundOptions[0]?.value === value; + }, [foundOptions]); + const displayNoOptionsText = useMemo(() => { return noOptionsText && !foundOptions.length; }, [noOptionsText,foundOptions]); @@ -159,8 +163,8 @@ const Autocomplete: FC = ({ }, [openAutocomplete]); useEffect(() => { - onFoundOptions && onFoundOptions(foundOptions); - }, [foundOptions]); + onFoundOptions && onFoundOptions(hideFoundedOptions ? [] : foundOptions); + }, [foundOptions, hideFoundedOptions]); return ( = ({ ref={wrapperEl} > {displayNoOptionsText &&
{noOptionsText}
} - {!(foundOptions.length === 1 && foundOptions[0]?.value === value) && foundOptions.map((option, i) => + {!hideFoundedOptions && foundOptions.map((option, i) =>