github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2025-03-21 15:45:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: prevent run query when selecting autocomplete option (#3480)

Browse source
This commit is contained in:
Yury Molodov 2022-12-13 18:30:05 +01:00 committed by Aliaksandr Valialkin
parent ea7940e5a7
commit cf8ddc67ec
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/vmui/packages/vmui/src/components/Configurators/QueryEditor/QueryEditor.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useRef } from "preact/compat"; import React, { FC, useRef, useState } from "preact/compat";
import { KeyboardEvent } from "react"; import { KeyboardEvent } from "react";
import { ErrorTypes } from "../../../types"; import { ErrorTypes } from "../../../types";
import TextField from "../../Main/TextField/TextField"; import TextField from "../../Main/TextField/TextField";
@ -32,6 +32,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
disabled = false disabled = false
}) => { }) => {
const [openAutocomplete, setOpenAutocomplete] = useState(false);
const autocompleteAnchorEl = useRef<HTMLDivElement>(null); const autocompleteAnchorEl = useRef<HTMLDivElement>(null);
const handleSelect = (val: string) => { const handleSelect = (val: string) => {
@ -59,7 +60,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
} }
// execute query // execute query
if (enter && !shiftKey) { if (enter && !shiftKey && !openAutocomplete) {
onEnter(); onEnter();
} }
}; };
@ -84,6 +85,7 @@ const QueryEditor: FC<QueryEditorProps> = ({
options={options} options={options}
anchor={autocompleteAnchorEl} anchor={autocompleteAnchorEl}
onSelect={handleSelect} onSelect={handleSelect}
onOpenAutocomplete={setOpenAutocomplete}
/> />
)} )}
</div>; </div>;

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

@ -10,7 +10,8 @@ interface AutocompleteProps {
anchor: Ref<HTMLElement> anchor: Ref<HTMLElement>
disabled?: boolean disabled?: boolean
maxWords?: number maxWords?: number
onSelect: (val: string) => void onSelect: (val: string) => void,
onOpenAutocomplete?: (val: boolean) => void
} }
const Autocomplete: FC<AutocompleteProps> = ({ const Autocomplete: FC<AutocompleteProps> = ({
@ -20,6 +21,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
disabled, disabled,
maxWords = 1, maxWords = 1,
onSelect, onSelect,
onOpenAutocomplete
}) => { }) => {
const wrapperEl = useRef<HTMLDivElement>(null); const wrapperEl = useRef<HTMLDivElement>(null);
@ -99,6 +101,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
setFocusOption(-1); setFocusOption(-1);
}, [foundOptions]); }, [foundOptions]);
useEffect(() => {
onOpenAutocomplete && onOpenAutocomplete(openAutocomplete);
}, [openAutocomplete]);
useClickOutside(wrapperEl, handleCloseAutocomplete); useClickOutside(wrapperEl, handleCloseAutocomplete);
return ( return (