diff --git a/packages/kbn-language-documentation-popover/src/components/documentation_popover.tsx b/packages/kbn-language-documentation-popover/src/components/documentation_popover.tsx
index db66d69d7173f..735c567dbb4d5 100644
--- a/packages/kbn-language-documentation-popover/src/components/documentation_popover.tsx
+++ b/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 (
- setIsHelpOpen(false)}
- button={
-
-
-
- }
+ {
+ setIsHelpOpen(false);
+ }}
>
-
-
+ setIsHelpOpen(false)}
+ button={
+
+
+
+ }
+ >
+
+
+
);
}
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
index 146e020d4fe82..15adf2f293bb8 100644
--- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
+++ b/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();
});