From 3ba8ee1d267000062106e20081743f055a7463fb Mon Sep 17 00:00:00 2001
From: Daman Arora <61474540+Damans227@users.noreply.github.com>
Date: Tue, 13 Jun 2023 01:38:45 -0400
Subject: [PATCH] fix: close dropdown after user has selected a tag (#2892)

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 .../SearchFields/QueryBuilder/QueryBuilder.tsx             | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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