From c20e65de863107d69965134dc02f50ed47fde658 Mon Sep 17 00:00:00 2001 From: Stratoula Date: Wed, 18 Feb 2026 15:22:44 +0100 Subject: [PATCH 1/4] [ES|QL] Fixes the focus flickering at the badge --- .../private/kbn-esql-editor/src/esql_editor.tsx | 2 +- .../resource_browser/use_resource_browser_badge.tsx | 1 - .../src/browser_popover_wrapper.tsx | 12 ++++++------ 3 files changed, 7 insertions(+), 8 deletions(-) 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 2f4668f9510c4..9ce075b7e1232 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 @@ -1274,7 +1274,7 @@ const ESQLEditorInternal = function ESQLEditor({ // with editor initialization and automated tests // Also skip when date picker is open to prevent overlap if (!isFirstFocusRef.current && !datePickerOpenStatusRef.current) { - triggerSuggestions(); + // triggerSuggestions(); } isFirstFocusRef.current = false; 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..45530f3e9ebd9 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 @@ -127,7 +127,6 @@ export const useSourcesBadge = ({ firstSupportedCommand.range.endColumn + 1 ); editor.setPosition(positionAfterCommand); - editor.revealPosition(positionAfterCommand); openIndicesBrowser({ openedFrom: IndicesBrowserOpenMode.Badge }); } }, 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 = ( Date: Wed, 18 Feb 2026 15:23:32 +0100 Subject: [PATCH 2/4] Revert --- .../packages/private/kbn-esql-editor/src/esql_editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9ce075b7e1232..2f4668f9510c4 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 @@ -1274,7 +1274,7 @@ const ESQLEditorInternal = function ESQLEditor({ // with editor initialization and automated tests // Also skip when date picker is open to prevent overlap if (!isFirstFocusRef.current && !datePickerOpenStatusRef.current) { - // triggerSuggestions(); + triggerSuggestions(); } isFirstFocusRef.current = false; From 6edd899cebc472f2d60c4e0ec0985aaf56ac1441 Mon Sep 17 00:00:00 2001 From: Stratoula Date: Wed, 18 Feb 2026 15:32:51 +0100 Subject: [PATCH 3/4] Stop triggering the suggestions on focus --- .../packages/private/kbn-esql-editor/src/esql_editor.tsx | 6 ++++++ .../src/resource_browser/use_resource_browser_badge.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 1 deletion(-) 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 2f4668f9510c4..40e9996fd6620 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); }, []); @@ -760,6 +765,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 45530f3e9ebd9..0773270015f8f 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,10 +129,13 @@ export const useSourcesBadge = ({ firstSupportedCommand.range.endColumn + 1 ); editor.setPosition(positionAfterCommand); + + suppressSuggestionsRef.current = true; + openIndicesBrowser({ openedFrom: IndicesBrowserOpenMode.Badge }); } }, - [editorModel, editorRef, openIndicesBrowser] + [editorModel, editorRef, openIndicesBrowser, suppressSuggestionsRef] ); return { From 0d1808c352d008b40d58c6c1cc946517d7ab6cff Mon Sep 17 00:00:00 2001 From: Stratoula Date: Wed, 18 Feb 2026 15:37:30 +0100 Subject: [PATCH 4/4] Remove the focus from the editor --- .../src/resource_browser/use_resource_browser_badge.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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 0773270015f8f..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 @@ -133,6 +133,10 @@ export const useSourcesBadge = ({ 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, suppressSuggestionsRef]