[8.x] [ES|QL] Give the ability to disable the autofocus on the editor (…

…#204706) (#204897)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ES|QL] Give the ability to disable the autofocus on the editor
(#204706)](#204706)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Stratoula
Kalafateli","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-19T09:33:21Z","message":"[ES|QL]
Give the ability to disable the autofocus on the editor (#204706)\n\n##
Summary\r\n\r\nRight now, the editor autofocuses by default. But there
are cases that a\r\nconsumer won't want this (autofocus might trigger
the suggestions).\r\n\r\nThis PR introduces a new property which allows
the consumers to disable\r\nthis feature.\r\n\r\n(I need this for the
ES|QL variables
feature)","sha":"65437c4499a8a3627a2dc900f20d261666eeb27e","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Feature:ES|QL","Team:ESQL","backport:version","v8.18.0"],"title":"[ES|QL]
Give the ability to disable the autofocus on the
editor","number":204706,"url":"https://github.com/elastic/kibana/pull/204706","mergeCommit":{"message":"[ES|QL]
Give the ability to disable the autofocus on the editor (#204706)\n\n##
Summary\r\n\r\nRight now, the editor autofocuses by default. But there
are cases that a\r\nconsumer won't want this (autofocus might trigger
the suggestions).\r\n\r\nThis PR introduces a new property which allows
the consumers to disable\r\nthis feature.\r\n\r\n(I need this for the
ES|QL variables
feature)","sha":"65437c4499a8a3627a2dc900f20d261666eeb27e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204706","number":204706,"mergeCommit":{"message":"[ES|QL]
Give the ability to disable the autofocus on the editor (#204706)\n\n##
Summary\r\n\r\nRight now, the editor autofocuses by default. But there
are cases that a\r\nconsumer won't want this (autofocus might trigger
the suggestions).\r\n\r\nThis PR introduces a new property which allows
the consumers to disable\r\nthis feature.\r\n\r\n(I need this for the
ES|QL variables
feature)","sha":"65437c4499a8a3627a2dc900f20d261666eeb27e"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Stratoula Kalafateli <[email protected]>

src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx

@@ -84,6 +84,7 @@ export const ESQLEditor = memo(function ESQLEditor({
   hideQueryHistory,
   hasOutline,
   displayDocumentationAsFlyout,
+  disableAutoFocus,
 }: ESQLEditorProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const datePickerOpenStatusRef = useRef<boolean>(false);
@@ -727,8 +728,10 @@ export const ESQLEditor = memo(function ESQLEditor({
                     editor.onDidChangeModelContent(showSuggestionsIfEmptyQuery);
 
                     // Auto-focus the editor and move the cursor to the end.
-                    editor.focus();
-                    editor.setPosition({ column: Infinity, lineNumber: Infinity });
+                    if (!disableAutoFocus) {
+                      editor.focus();
+                      editor.setPosition({ column: Infinity, lineNumber: Infinity });
+                    }
                   }}
                 />
               </div>

src/platform/packages/private/kbn-esql-editor/src/types.ts

@@ -66,6 +66,9 @@ export interface ESQLEditorProps {
 
   /** adds a documentation icon in the footer which opens the inline docs as a flyout **/
   displayDocumentationAsFlyout?: boolean;
+
+  /** The component by default focuses on the editor when it is mounted, this flag disables it**/
+  disableAutoFocus?: boolean;
 }
 
 export interface ESQLEditorDeps {