From 354d82f039391fdfb6c6ed1648a184c7d2e11021 Mon Sep 17 00:00:00 2001
From: amlannandy <amlannandy5@gmail.com>
Date: Wed, 29 Jan 2025 12:26:34 +0530
Subject: [PATCH] chore: fix filter editing issue in infra monitoring

---
 .../filters/QueryBuilderSearch/index.tsx      | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index d70e55197a..ecc40048b5 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -88,6 +88,8 @@ function QueryBuilderSearch({
 		[pathname],
 	);
 
+	const [isEditingTag, setIsEditingTag] = useState(false);
+
 	const {
 		updateTag,
 		handleClearTag,
@@ -133,6 +135,16 @@ function QueryBuilderSearch({
 
 	const { handleRunQuery, currentQuery } = useQueryBuilder();
 
+	const toggleEditMode = useCallback(
+		(value: boolean) => {
+			// Editing mode is required only in infra monitoring mode
+			if (isInfraMonitoring) {
+				setIsEditingTag(value);
+			}
+		},
+		[isInfraMonitoring],
+	);
+
 	const onTagRender = ({
 		value,
 		closable,
@@ -146,12 +158,16 @@ function QueryBuilderSearch({
 
 		const onCloseHandler = (): void => {
 			onClose();
+			// Editing is done after closing a tag
+			toggleEditMode(false);
 			handleSearch('');
 			setSearchKey('');
 		};
 
 		const tagEditHandler = (value: string): void => {
 			updateTag(value);
+			// Editing starts
+			toggleEditMode(true);
 			if (isInfraMonitoring) {
 				setSearchValue(value);
 			} else {
@@ -188,6 +204,11 @@ function QueryBuilderSearch({
 		if (isMulti || event.key === 'Backspace') handleKeyDown(event);
 		if (isExistsNotExistsOperator(searchValue)) handleKeyDown(event);
 
+		// Editing is done after enter key press
+		if (event.key === 'Enter') {
+			toggleEditMode(false);
+		}
+
 		if (
 			!disableNavigationShortcuts &&
 			(event.ctrlKey || event.metaKey) &&
@@ -270,7 +291,14 @@ function QueryBuilderSearch({
 			};
 		});
 
-		onChange(initialTagFilters);
+		// If in infra monitoring, only run the onChange query when editing is finsished.
+		if (isInfraMonitoring) {
+			if (!isEditingTag) {
+				onChange(initialTagFilters);
+			}
+		} else {
+			onChange(initialTagFilters);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [sourceKeys]);
 
@@ -367,7 +395,11 @@ function QueryBuilderSearch({
 					)
 				}
 				showAction={['focus']}
-				onBlur={handleOnBlur}
+				onBlur={(e: React.FocusEvent<HTMLInputElement>): void => {
+					handleOnBlur(e);
+					// Editing is done after tapping out of the input
+					toggleEditMode(false);
+				}}
 				popupClassName={isLogsExplorerPage ? 'logs-explorer-popup' : ''}
 				dropdownRender={(menu): ReactElement => (
 					<div>