vmui: improve select component functionality (#5755)

* vmui: fix select closing on click outside (#5728)

* vmui: clear entered text in select after selecting a value (#5727)

---------

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

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

@@ -30,6 +30,7 @@ interface AutocompleteProps {
   onSelect: (val: string) => void
   onOpenAutocomplete?: (val: boolean) => void
   onFoundOptions?: (val: AutocompleteOptions[]) => void
+  onChangeWrapperRef?: (elementRef: Ref<HTMLDivElement>) => void
 }
 
 enum FocusType {
@@ -52,7 +53,8 @@ const Autocomplete: FC<AutocompleteProps> = ({
   maxDisplayResults,
   onSelect,
   onOpenAutocomplete,
-  onFoundOptions
+  onFoundOptions,
+  onChangeWrapperRef
 }) => {
   const { isMobile } = useDeviceDetect();
   const wrapperEl = useRef<HTMLDivElement>(null);
@@ -166,6 +168,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
     onFoundOptions && onFoundOptions(hideFoundedOptions ? [] : foundOptions);
   }, [foundOptions, hideFoundedOptions]);
 
+  useEffect(() => {
+    onChangeWrapperRef && onChangeWrapperRef(wrapperEl);
+  }, [wrapperEl]);
+
   return (
     <Popper
       open={openAutocomplete}

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

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useRef, useState,  } from "preact/compat";
+import React, { FC, Ref, useEffect, useMemo, useRef, useState, } from "preact/compat";
 import classNames from "classnames";
 import { ArrowDropDownIcon, CloseIcon } from "../Icons";
 import { FormEvent, MouseEvent } from "react";
@@ -8,6 +8,7 @@ import "./style.scss";
 import useDeviceDetect from "../../../hooks/useDeviceDetect";
 import MultipleSelectedValue from "./MultipleSelectedValue/MultipleSelectedValue";
 import useEventListener from "../../../hooks/useEventListener";
+import useClickOutside from "../../../hooks/useClickOutside";
 
 interface SelectProps {
   value: string | string[]
@@ -39,6 +40,7 @@ const Select: FC<SelectProps> = ({
 
   const [search, setSearch] = useState("");
   const autocompleteAnchorEl = useRef<HTMLDivElement>(null);
+  const [wrapperRef, setWrapperRef] = useState<Ref<HTMLDivElement> | null>(null);
   const [openList, setOpenList] = useState(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -76,6 +78,7 @@ const Select: FC<SelectProps> = ({
   };
 
   const handleSelected = (val: string) => {
+    setSearch("");
     onChange(val);
     if (!isMultiple) handleCloseList();
     if (isMultiple && inputRef.current) inputRef.current.focus();
@@ -110,6 +113,7 @@ const Select: FC<SelectProps> = ({
   }, [autofocus, inputRef]);
 
   useEventListener("keyup", handleKeyUp);
+  useClickOutside(autocompleteAnchorEl, handleCloseList, wrapperRef);
 
   return (
     <div
@@ -172,6 +176,7 @@ const Select: FC<SelectProps> = ({
         noOptionsText={noOptionsText}
         onSelect={handleSelected}
         onOpenAutocomplete={setOpenList}
+        onChangeWrapperRef={setWrapperRef}
       />
     </div>
   );

app/vmui/packages/vmui/src/hooks/useClickOutside.ts

@@ -7,7 +7,7 @@ type Event = MouseEvent | TouchEvent;
 const useClickOutside = <T extends HTMLElement = HTMLElement>(
   ref: RefObject<T>,
   handler: (event: Event) => void,
-  preventRef?: RefObject<T>
+  preventRef?: RefObject<T> | null
 ) => {
   const listener = useCallback((event: Event) => {
     const el = ref?.current;

docs/CHANGELOG.md

@@ -36,6 +36,8 @@ The sandbox cluster installation is running under the constant load generated by
 * BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): properly propagate [label filters](https://docs.victoriametrics.com/keyconcepts/#filtering) from multiple arguments passed to [aggregate functions](https://docs.victoriametrics.com/metricsql/#aggregate-functions). For example, `sum({job="foo"}, {job="bar"}) by (job) + a` was improperly optimized to `sum({job="foo"}, {job="bar"}) by (job) + a{job="foo"}` before being executed. This could lead to unexpected results. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5604).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the graph dragging for Firefox and Safari. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5764).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix handling invalid timezone. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5732).
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the bug where the select does not open. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5728).
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): clear entered text in select after selecting a value. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5727).
 
 ## [v1.97.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.97.1)