github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-21 14:44:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

vmui: improve select component functionality (#5755)

Browse source 
* 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>
This commit is contained in:
Yury Molodov 2024-02-06 21:50:04 +01:00 committed by Aliaksandr Valialkin
parent 0b5f5d456c
commit 5778acf9eb
No known key found for this signature in database
GPG key ID: 52C003EE2BCDB9EB
4 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx
View file

@ -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}

7
app/vmui/packages/vmui/src/components/Main/Select/Select.tsx
View file

@ -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>
);

2
app/vmui/packages/vmui/src/hooks/useClickOutside.ts
View file

@ -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;

2
docs/CHANGELOG.md
View file

@ -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)