[ES|QL] Clicking the editor closes the documentation popover (elastic…

…#176394)

## Summary

Part of elastic#166907

Fixes the problem with the eui popovers and the monaco editor. I am not
sure why it is happening. I think it is due to the third party library
that eui uses to detects the outside clicks.

What I did to fix it:

- Wrap the documentation popover in an EuiOutsideClickDetector
- I force monaco editor to focus onMoyseDown


![meow](https://github.com/elastic/kibana/assets/17003240/f432608d-0801-4a68-b327-da1e8dec9f9a)

This solves the problem on the documentation popover but not on the
SuperDatePicker because I don't have a way to force it to close. I will
ping the EUI team

packages/kbn-language-documentation-popover/src/components/documentation_popover.tsx

@@ -7,7 +7,13 @@
  */
 import React, { useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiPopover, EuiToolTip, EuiButtonIcon, EuiButtonIconProps } from '@elastic/eui';
+import {
+  EuiPopover,
+  EuiToolTip,
+  EuiButtonIcon,
+  EuiButtonIconProps,
+  EuiOutsideClickDetector,
+} from '@elastic/eui';
 import {
   type LanguageDocumentationSections,
   LanguageDocumentationPopoverContent,
@@ -33,35 +39,41 @@ function DocumentationPopover({
   }, [isHelpOpen]);
 
   return (
-    <EuiPopover
-      panelClassName="documentation__docs--overlay"
-      panelPaddingSize="none"
-      isOpen={isHelpOpen}
-      closePopover={() => setIsHelpOpen(false)}
-      button={
-        <EuiToolTip
-          position="top"
-          content={i18n.translate('languageDocumentationPopover.tooltip', {
-            defaultMessage: '{lang} reference',
-            values: {
-              lang: language,
-            },
-          })}
-        >
-          <EuiButtonIcon
-            iconType="documentation"
-            onClick={toggleDocumentationPopover}
-            {...buttonProps}
-          />
-        </EuiToolTip>
-      }
+    <EuiOutsideClickDetector
+      onOutsideClick={() => {
+        setIsHelpOpen(false);
+      }}
     >
-      <LanguageDocumentationPopoverContent
-        language={language}
-        sections={sections}
-        searchInDescription={searchInDescription}
-      />
-    </EuiPopover>
+      <EuiPopover
+        panelClassName="documentation__docs--overlay"
+        panelPaddingSize="none"
+        isOpen={isHelpOpen}
+        closePopover={() => setIsHelpOpen(false)}
+        button={
+          <EuiToolTip
+            position="top"
+            content={i18n.translate('languageDocumentationPopover.tooltip', {
+              defaultMessage: '{lang} reference',
+              values: {
+                lang: language,
+              },
+            })}
+          >
+            <EuiButtonIcon
+              iconType="documentation"
+              onClick={toggleDocumentationPopover}
+              {...buttonProps}
+            />
+          </EuiToolTip>
+        }
+      >
+        <LanguageDocumentationPopoverContent
+          language={language}
+          sections={sections}
+          searchInDescription={searchInDescription}
+        />
+      </EuiPopover>
+    </EuiOutsideClickDetector>
   );
 }
 

packages/kbn-text-based-editor/src/text_based_languages_editor.tsx

@@ -815,6 +815,17 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                           }
                         });
 
+                        // this is fixing a bug between the EUIPopover and the monaco editor
+                        // when the user clicks the editor, we force it to focus and the onDidFocusEditorText
+                        // to fire, the timeout is needed because otherwise it refocuses on the popover icon
+                        // and the user needs to click again the editor.
+                        // IMPORTANT: The popover needs to be wrapped with the EuiOutsideClickDetector component.
+                        editor.onMouseDown(() => {
+                          setTimeout(() => {
+                            editor.focus();
+                          }, 100);
+                        });
+
                         editor.onDidFocusEditorText(() => {
                           onEditorFocus();
                         });