vmui: fix Enter key in query field (#5667) (#5681)

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<QueryEditorProps> = ({
   label,
   disabled = false
 }) => {
+  const { autocompleteQuick } = useQueryState();
   const { isMobile } = useDeviceDetect();
 
   const [openAutocomplete, setOpenAutocomplete] = useState(false);
@@ -61,7 +62,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
     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<QueryEditorProps> = ({
       e.preventDefault();
       onEnter();
     }
-  };
+  }, [openAutocomplete]);
 
   const handleChangeFoundOptions = (val: AutocompleteOptions[]) => {
     setOpenAutocomplete(!!val.length);
@@ -103,6 +104,10 @@ const QueryEditor: FC<QueryEditorProps> = ({
     setCaretPosition(val);
   };
 
+  useEffect(() => {
+    setOpenAutocomplete(autocomplete);
+  }, [autocompleteQuick]);
+
   return (
     <div
       className="vm-query-editor"

app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx

@@ -85,6 +85,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
     }
   }, [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<AutocompleteProps> = ({
   }, [openAutocomplete]);
 
   useEffect(() => {
-    onFoundOptions && onFoundOptions(foundOptions);
+    onFoundOptions && onFoundOptions(hideFoundedOptions ? [] : foundOptions);
-  }, [foundOptions]);
+  }, [foundOptions, hideFoundedOptions]);
 
   return (
     <Popper
@@ -181,7 +185,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
         ref={wrapperEl}
       >
         {displayNoOptionsText && <div className="vm-autocomplete__no-options">{noOptionsText}</div>}
-        {!(foundOptions.length === 1 && foundOptions[0]?.value === value) && foundOptions.map((option, i) =>
+        {!hideFoundedOptions && foundOptions.map((option, i) =>
           <div
             className={classNames({
               "vm-list-item": true,

docs/CHANGELOG.md

@@ -84,6 +84,7 @@ The sandbox cluster installation is running under the constant load generated by
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix a link for the statistic inaccuracy explanation in the cardinality explorer tool. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5460).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of autocomplete results and cache the results. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5472) and [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5470).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): send `step` param for instant queries. The change reverts [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3896) due to reasons explained in [this comment](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3896#issuecomment-1896704401).
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the `Enter` key press issue in the `Query` field when using autocomplete. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5667).
 * BUGFIX: all: fix potential panic during components shutdown when [metrics push](https://docs.victoriametrics.com/#push-metrics) is configured. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5548). Thanks to @zhdd99 for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5549).
 * BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): properly process queries with too big lookbehind window such as `foo[100y]`. Previously, such queries could return empty responses even if `foo` is present in database. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5553).
 * BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): properly handle possible negative results caused by float operations precision error in rollup functions like rate() or increase(). See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5571).