Monaco-editor: How to know if there is a popup open in monaco editor ?

Created on 9 May 2018  路  4Comments  路  Source: microsoft/monaco-editor

How can I know if a popup/tooltip is open in the Monaco Editor ?
If a popup is open, then on escape button press the popup should be closed. On a new escape button click the monaco editor should blur (lose focus).

This is what I mean with popup:
image

Here is my source code, but now as it is it immediately loses focus if escape button is pressed. Instead if a popup is open then that should be closed first without the editor losing focus:

 @HostListener('keydown.escape', ['$event']) private onKeydownHandler(event: KeyboardEvent) {
        if (event.keyCode === ESCAPE_KEYCODE && this.editorService.monacoEditor.isFocused()) {
            event.stopPropagation();
            if (this.editorService.monacoEditor.isFocused()) {
                // This is still not good enough, first the popups should be closed if any. If no popups then the editor should lose focus
                if (document.activeElement instanceof HTMLElement) {
                    document.activeElement.blur();
                }
            }
        }
    }

Most helpful comment

There is no need to listen global keydown event, just use

editorInstance.addCommand(
    monaco.KeyCode.Escape,
    () => {
      document.activeElement.blur();
    },
    '!suggestWidgetVisible',
  )

when editor created, it should work

All 4 comments

editorInstance.addCommand(
    monaco.KeyCode.Escape,
    () => {
      // only fired when popup invisible
    },
    '!suggestWidgetVisible',
  )

@troy351 nice but I am not quite there. If the tooltip is open it should close on Escape. If Escape is clicked once more the editor should lose focus.

Now I have to click Escape twice to lose focus, what am I doing wrong ?

@HostListener('keydown.escape', ['$event']) private onKeydownHandler(event: KeyboardEvent) {
        if (event.keyCode === ESCAPE_KEYCODE) {

            this.editorService.clarionEditor.addCommand(monaco.KeyCode.Escape, () => {
                // only fired when popup invisible
                if (document.activeElement instanceof HTMLElement) {
                    document.activeElement.blur();
                }
            }, '!suggestWidgetVisible');

            event.stopPropagation();
        }
    }

There is no need to listen global keydown event, just use

editorInstance.addCommand(
    monaco.KeyCode.Escape,
    () => {
      document.activeElement.blur();
    },
    '!suggestWidgetVisible',
  )

when editor created, it should work

Thanks now it works as expected.

Was this page helpful?
0 / 5 - 0 ratings