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(); });