fix: close dropdown after user has selected a tag (#2892)

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Daman Arora 2023-06-13 01:38:45 -04:00 committed by GitHub
parent 316cbe484b
commit 3ba8ee1d26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -6,7 +6,7 @@ import {
QueryOperatorsMultiVal, QueryOperatorsMultiVal,
QueryOperatorsSingleVal, QueryOperatorsSingleVal,
} from 'lib/logql/tokens'; } from 'lib/logql/tokens';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import { ILogsReducer } from 'types/reducer/logs'; import { ILogsReducer } from 'types/reducer/logs';
@ -56,6 +56,8 @@ function QueryField({
onUpdate, onUpdate,
onDelete, onDelete,
}: QueryFieldProps): JSX.Element | null { }: QueryFieldProps): JSX.Element | null {
const [isDropDownOpen, setIsDropDownOpen] = useState(false);
const { const {
fields: { selected }, fields: { selected },
} = useSelector<AppState, ILogsReducer>((store) => store.logs); } = useSelector<AppState, ILogsReducer>((store) => store.logs);
@ -136,9 +138,12 @@ function QueryField({
<Select <Select
mode="tags" mode="tags"
style={{ width: '100%' }} style={{ width: '100%' }}
open={isDropDownOpen}
onChange={(e): void => handleChange(2, e as never)} onChange={(e): void => handleChange(2, e as never)}
defaultValue={(query[2] && query[2].value) || []} defaultValue={(query[2] && query[2].value) || []}
notFoundContent={null} notFoundContent={null}
onInputKeyDown={(): void => setIsDropDownOpen(true)}
onSelect={(): void => setIsDropDownOpen(false)}
/> />
) : ( ) : (
<Input <Input