From e78a95e7d38771694a4f40692b06d1c02473e2bd Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Fri, 11 Feb 2022 13:40:17 -0800 Subject: [PATCH] Fix Notebook navigation key events triggering incorrectly (#18329) --- .../notebook/browser/notebook.component.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts index 9279c5fac3..567a80df73 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts @@ -133,9 +133,17 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe } return false; })); + } + + ngOnInit() { + // We currently have to hook this onto window because the Notebook component currently doesn't support having document focus + // on its elements (we have a "virtual" focus that is updated as users click or navigate through cells). So some of the keyboard + // events we care about are fired when the document focus is on something else - typically the root window. this._register(DOM.addDisposableListener(window, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => { - let event = new StandardKeyboardEvent(e); - if (this.isActive() && this.model.activeCell) { + // Make sure that the current active element is an ancestor - this is to prevent us from handling events when the focus is + // on some other dialog or part of the app. + if (DOM.isAncestor(this.container.nativeElement, document.activeElement) && this.isActive() && this.model.activeCell) { + const event = new StandardKeyboardEvent(e); if (!this.model.activeCell?.isEditMode) { if (event.keyCode === KeyCode.DownArrow) { let next = (this.findCellIndex(this.model.activeCell) + 1) % this.cells.length; @@ -167,9 +175,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe } } })); - } - - ngOnInit() { this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this)); this.updateTheme(this.themeService.getColorTheme()); this.initActionBar();