vmui: change selection from autocomplete (#2862)

* fix: change selection from autocomplete

* update docs/CHANELOG.md

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Query/QueryEditor.tsx

@@ -7,6 +7,7 @@ import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import MenuItem from "@mui/material/MenuItem";
 import MenuList from "@mui/material/MenuList";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
 
 export interface QueryEditorProps {
   setHistoryIndex: (step: number, index: number) => void;
@@ -37,11 +38,14 @@ const QueryEditor: FC<QueryEditorProps> = ({
   const [focusOption, setFocusOption] = useState(-1);
   const autocompleteAnchorEl = useRef<HTMLDivElement>(null);
   const wrapperEl = useRef<HTMLUListElement>(null);
+  const [openAutocomplete, setOpenAutocomplete] = useState(false);
 
-  const openAutocomplete = useMemo(() => {
+  useEffect(() => {
+    if (!focusField) return;
     const words = (query.match(/[a-zA-Z_:.][a-zA-Z0-9_:.]*/gm) || []).length;
-    return !(!autocomplete || query.length < 2 || words > 1 || !focusField);
+    setOpenAutocomplete(!(!autocomplete || query.length < 2 || words > 1));
-  }, [query, autocomplete, focusField]);
+  },
+  [autocomplete, query]);
 
   const actualOptions = useMemo(() => {
     setFocusOption(0);
@@ -106,28 +110,28 @@ const QueryEditor: FC<QueryEditorProps> = ({
       focused={!!query}
       error={!!error}
       onFocus={() => setFocusField(true)}
-      onBlur={(e) => {
-        const autocompleteItem = e.relatedTarget?.id || "";
-        const itemIndex = actualOptions.indexOf(autocompleteItem.replace("$autocomplete$", ""));
-        if (itemIndex !== -1) {
-          setQuery(actualOptions[itemIndex], index);
-          e.target.focus();
-        } else {
-          setFocusField(false);
-        }
-      }}
       onKeyDown={handleKeyDown}
       onChange={(e) => setQuery(e.target.value, index)}
     />
     <Popper open={openAutocomplete} anchorEl={autocompleteAnchorEl.current} placement="bottom-start">
+      <ClickAwayListener onClickAway={() => setOpenAutocomplete(false)}>
         <Paper elevation={3} sx={{ maxHeight: 300, overflow: "auto" }}>
           <MenuList ref={wrapperEl} dense>
             {actualOptions.map((item, i) =>
-            <MenuItem id={`$autocomplete$${item}`} key={item} sx={{bgcolor: `rgba(0, 0, 0, ${i === focusOption ? 0.12 : 0})`}}>
+              <MenuItem
+                id={`$autocomplete$${item}`}
+                key={item}
+                sx={{bgcolor: `rgba(0, 0, 0, ${i === focusOption ? 0.12 : 0})`}}
+                onClick={() => {
+                  setQuery(item, index);
+                  setOpenAutocomplete(false);
+                }}
+              >
                 {item}
               </MenuItem>)}
           </MenuList>
         </Paper>
+      </ClickAwayListener>
     </Popper>
   </Box>;
 };

docs/CHANGELOG.md

@@ -75,6 +75,7 @@ scrape_configs:
 * BUGFIX: [vmselect](https://docs.victoriametrics.com/#vmselect): update `vm_partial_results_total` metric labels to be consistent with `vm_requests_total` labels.
 * BUGFIX: accept tags without values when reading data in [DataDog format](https://docs.victoriametrics.com/Single-server-VictoriaMetrics.html#how-to-send-data-from-datadog-agent). Thanks to @PerGon for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/2839).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): properly pass the end of the selected time range to `time` query arg to [/api/v1/query](https://prometheus.io/docs/prometheus/latest/querying/api/#instant-queries) when displaying the requested data in JSON and table views. Previously the `time` query arg wasn't set, so `/api/v1/query` was always returning query results for the current time regardless of the selected time range. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2781).
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): allow clicking on the suggestion from autocomplete list. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2804).
 
 ## [v1.78.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.78.1)