chore: fix filter editing issue in infra monitoring (#6961)

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>