diff --git a/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx b/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx index fb16c7f67423f..3dc1aaa527c57 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx +++ b/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx @@ -159,6 +159,7 @@ const ESQLEditorInternal = function ESQLEditor({ const editorRef = useRef(); const editorModelUriRef = useRef(undefined); const containerRef = useRef(null); + const suppressSuggestionsRef = useRef(false); const editorCommandDisposables = useRef( new WeakMap() @@ -479,6 +480,10 @@ const ESQLEditorInternal = function ESQLEditor({ const triggerSuggestions = useCallback(() => { setTimeout(() => { + if (suppressSuggestionsRef.current) { + suppressSuggestionsRef.current = false; + return; + } editorRef.current?.trigger(undefined, 'editor.action.triggerSuggest', {}); }, 0); }, []); @@ -761,6 +766,7 @@ const ESQLEditorInternal = function ESQLEditor({ editorRef, editorModel, openIndicesBrowser, + suppressSuggestionsRef, }); const { diff --git a/src/platform/packages/private/kbn-esql-editor/src/resource_browser/use_resource_browser_badge.tsx b/src/platform/packages/private/kbn-esql-editor/src/resource_browser/use_resource_browser_badge.tsx index 7a811ff51a1e8..7a87410949bcc 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/resource_browser/use_resource_browser_badge.tsx +++ b/src/platform/packages/private/kbn-esql-editor/src/resource_browser/use_resource_browser_badge.tsx @@ -20,12 +20,14 @@ interface UseSourcesBadgeParams { editorRef: MutableRefObject; editorModel: MutableRefObject; openIndicesBrowser: (options?: { openedFrom?: IndicesBrowserOpenMode }) => void; + suppressSuggestionsRef: MutableRefObject; } export const useSourcesBadge = ({ editorRef, editorModel, openIndicesBrowser, + suppressSuggestionsRef, }: UseSourcesBadgeParams) => { const { euiTheme } = useEuiTheme(); const decorationsRef = useRef(undefined); @@ -127,11 +129,17 @@ export const useSourcesBadge = ({ firstSupportedCommand.range.endColumn + 1 ); editor.setPosition(positionAfterCommand); - editor.revealPosition(positionAfterCommand); + + suppressSuggestionsRef.current = true; + openIndicesBrowser({ openedFrom: IndicesBrowserOpenMode.Badge }); + + // Remove focus from the editor immediately so there is no visible + // focus state while the popover mounts and takes over. + (editor.getDomNode()?.ownerDocument.activeElement as HTMLElement)?.blur(); } }, - [editorModel, editorRef, openIndicesBrowser] + [editorModel, editorRef, openIndicesBrowser, suppressSuggestionsRef] ); return { diff --git a/src/platform/packages/shared/kbn-esql-resource-browser/src/browser_popover_wrapper.tsx b/src/platform/packages/shared/kbn-esql-resource-browser/src/browser_popover_wrapper.tsx index 56ae043c97f8d..25703542adc5b 100644 --- a/src/platform/packages/shared/kbn-esql-resource-browser/src/browser_popover_wrapper.tsx +++ b/src/platform/packages/shared/kbn-esql-resource-browser/src/browser_popover_wrapper.tsx @@ -106,15 +106,15 @@ export function BrowserPopoverWrapper({ searchInputRef.current = node; }; - // Focus the search input when popover opens + // Focus the search input as soon as the popover opens so that focus + // transfers away from the editor immediately (avoids visible flicker). useEffect(() => { - if (isOpen && !isLoading) { - // Use setTimeout to ensure the DOM is ready - setTimeout(() => { + if (isOpen) { + requestAnimationFrame(() => { searchInputRef.current?.focus(); - }, 0); + }); } - }, [isOpen, isLoading]); + }, [isOpen]); const filterButton = (