From 9a5bcb6b64516866f09ae3d462df114d44090252 Mon Sep 17 00:00:00 2001 From: Abhi kumar Date: Thu, 25 Sep 2025 19:27:05 +0530 Subject: [PATCH] revert: removed changes done for cursor position jump fix (#9193) --- .../QueryV2/QuerySearch/QuerySearch.tsx | 69 +++---------------- .../QueryV2/__tests__/QuerySearch.test.tsx | 22 ------ 2 files changed, 11 insertions(+), 80 deletions(-) diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx index f93a6ba6ee36..4b0debe8e6a1 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx +++ b/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(''); + const [query, setQuery] = useState(queryData.filter?.expression || ''); const [valueSuggestions, setValueSuggestions] = useState([]); const [activeKey, setActiveKey] = useState(''); 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(''); const lastValueRef = useRef(''); const isMountedRef = useRef(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({ ); - // 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 (
{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 && ( diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx index b3862283f6b3..290ef518b5ec 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx +++ b/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( - , - ); - - 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 => {