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:

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();
}
}
}
}
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.
Most helpful comment
There is no need to listen global keydown event, just use
when editor created, it should work