revert: removed changes done for cursor position jump fix (#9193)

Author: ahrefabhi

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -97,7 +97,7 @@ function QuerySearch({
 	onRun?: (query: string) => void;
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [query, setQuery] = useState<string>('');
+	const [query, setQuery] = useState<string>(queryData.filter?.expression || '');
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
 	const [activeKey, setActiveKey] = useState<string>('');
 	const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
@@ -108,10 +108,6 @@ function QuerySearch({
 		errors: [],
 	});
 
-	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
-	const [isFocused, setIsFocused] = useState(false);
-	const [hasInteractedWithQB, setHasInteractedWithQB] = useState(false);
-
 	const handleQueryValidation = (newQuery: string): void => {
 		try {
 			const validationResponse = validateQuery(newQuery);
@@ -131,28 +127,13 @@ function QuerySearch({
 
 	useEffect(() => {
 		const newQuery = queryData.filter?.expression || '';
-		// Only update query from external source when editor is not focused
-		// When focused, just update the lastExternalQuery to track changes
+		// Only mark as external change if the query actually changed from external source
 		if (newQuery !== lastExternalQuery) {
 			setQuery(newQuery);
 			setIsExternalQueryChange(true);
 			setLastExternalQuery(newQuery);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [queryData.filter?.expression]);
-
-	useEffect(() => {
-		// Update the query when the editor is blurred and the query has changed
-		// Only call onChange if the editor has been focused before (not on initial mount)
-		if (
-			!isFocused &&
-			hasInteractedWithQB &&
-			query !== queryData.filter?.expression
-		) {
-			onChange(query);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isFocused]);
+	}, [queryData.filter?.expression, lastExternalQuery]);
 
 	// Validate query when it changes externally (from queryData)
 	useEffect(() => {
@@ -168,6 +149,9 @@ function QuerySearch({
 
 	const [showExamples] = useState(false);
 
+	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
+	const [isFocused, setIsFocused] = useState(false);
+
 	const [
 		isFetchingCompleteValuesList,
 		setIsFetchingCompleteValuesList,
@@ -181,9 +165,6 @@ function QuerySearch({
 	const lastFetchedKeyRef = useRef<string>('');
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
-	const [shouldRunQueryPostUpdate, setShouldRunQueryPostUpdate] = useState(
-		false,
-	);
 
 	const { handleRunQuery } = useQueryBuilder();
 
@@ -229,7 +210,6 @@ function QuerySearch({
 
 			return (): void => clearTimeout(timeoutId);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[isFocused],
 	);
 
@@ -575,6 +555,7 @@ function QuerySearch({
 
 	const handleChange = (value: string): void => {
 		setQuery(value);
+		onChange(value);
 		// Mark as internal change to avoid triggering external validation
 		setIsExternalQueryChange(false);
 		// Update lastExternalQuery to prevent external validation trigger
@@ -1238,25 +1219,6 @@ function QuerySearch({
 		</div>
 	);
 
-	// Effect to handle query run after update
-	useEffect(
-		() => {
-			// Only run the query post updating the filter expression.
-			// This runs the query in the next update cycle of react, when it's guaranteed that the query is updated.
-			// Because both the things are sequential and react batches the updates so it was still taking the old query.
-			if (shouldRunQueryPostUpdate) {
-				if (onRun && typeof onRun === 'function') {
-					onRun(query);
-				} else {
-					handleRunQuery();
-				}
-				setShouldRunQueryPostUpdate(false);
-			}
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[shouldRunQueryPostUpdate, handleRunQuery, onRun],
-	);
-
 	return (
 		<div className="code-mirror-where-clause">
 			{editingMode && (
@@ -1331,7 +1293,6 @@ function QuerySearch({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
-					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1368,14 +1329,11 @@ function QuerySearch({
 									// and instead run a custom action
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
-										if (
-											onChange &&
-											typeof onChange === 'function' &&
-											query !== queryData.filter?.expression
-										) {
-											onChange(query);
+										if (onRun && typeof onRun === 'function') {
+											onRun(query);
+										} else {
+											handleRunQuery();
 										}
-										setShouldRunQueryPostUpdate(true);
 										return true;
 									},
 								},
@@ -1394,13 +1352,8 @@ function QuerySearch({
 					}}
 					onFocus={(): void => {
 						setIsFocused(true);
-						setHasInteractedWithQB(true);
 					}}
 					onBlur={handleBlur}
-					onCreateEditor={(view: EditorView): EditorView => {
-						editorRef.current = view;
-						return view;
-					}}
 				/>
 
 				{query && validation.isValid === false && !isFocused && (

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -222,28 +222,6 @@ describe('QuerySearch', () => {
 		expect(screen.getByPlaceholderText(PLACEHOLDER_TEXT)).toBeInTheDocument();
 	});
 
-	it('calls onChange on blur after user edits', async () => {
-		const handleChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<QuerySearch
-				onChange={handleChange}
-				queryData={initialQueriesMap.metrics.builder.queryData[0]}
-				dataSource={DataSource.METRICS}
-			/>,
-		);
-
-		const editor = screen.getByTestId(TESTID_EDITOR);
-		await user.click(editor);
-		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
-		// Blur triggers validation + onChange (only if focused at least once and value changed)
-		editor.blur();
-
-		await waitFor(() => expect(handleChange).toHaveBeenCalledTimes(1));
-		expect(handleChange.mock.calls[0][0]).toContain("service.name = 'frontend'");
-	});
-
 	it('fetches key suggestions when typing a key (debounced)', async () => {
 		jest.useFakeTimers();
 		const advance = (ms: number): void => {