diff --git a/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx b/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx index 1cac960b2..7d368483c 100644 --- a/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx +++ b/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) => void } enum FocusType { @@ -52,7 +53,8 @@ const Autocomplete: FC = ({ maxDisplayResults, onSelect, onOpenAutocomplete, - onFoundOptions + onFoundOptions, + onChangeWrapperRef }) => { const { isMobile } = useDeviceDetect(); const wrapperEl = useRef(null); @@ -166,6 +168,10 @@ const Autocomplete: FC = ({ onFoundOptions && onFoundOptions(hideFoundedOptions ? [] : foundOptions); }, [foundOptions, hideFoundedOptions]); + useEffect(() => { + onChangeWrapperRef && onChangeWrapperRef(wrapperEl); + }, [wrapperEl]); + return ( = ({ const [search, setSearch] = useState(""); const autocompleteAnchorEl = useRef(null); + const [wrapperRef, setWrapperRef] = useState | null>(null); const [openList, setOpenList] = useState(false); const inputRef = useRef(null); @@ -76,6 +78,7 @@ const Select: FC = ({ }; const handleSelected = (val: string) => { + setSearch(""); onChange(val); if (!isMultiple) handleCloseList(); if (isMultiple && inputRef.current) inputRef.current.focus(); @@ -110,6 +113,7 @@ const Select: FC = ({ }, [autofocus, inputRef]); useEventListener("keyup", handleKeyUp); + useClickOutside(autocompleteAnchorEl, handleCloseList, wrapperRef); return (
= ({ noOptionsText={noOptionsText} onSelect={handleSelected} onOpenAutocomplete={setOpenList} + onChangeWrapperRef={setWrapperRef} />
); diff --git a/app/vmui/packages/vmui/src/hooks/useClickOutside.ts b/app/vmui/packages/vmui/src/hooks/useClickOutside.ts index 912a477e0..ac775b90a 100644 --- a/app/vmui/packages/vmui/src/hooks/useClickOutside.ts +++ b/app/vmui/packages/vmui/src/hooks/useClickOutside.ts @@ -7,7 +7,7 @@ type Event = MouseEvent | TouchEvent; const useClickOutside = ( ref: RefObject, handler: (event: Event) => void, - preventRef?: RefObject + preventRef?: RefObject | null ) => { const listener = useCallback((event: Event) => { const el = ref?.current; diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 610b0fa1f..559be0396 100644 --- a/docs/CHANGELOG.md +++ b/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)