Keydown event at bubbling phase

packages/application/src/index.ts

@@ -188,6 +188,20 @@ export class Application<T extends Widget = Widget> {
     return this._delegate.promise;
   }
 
+  /**
+   * Getter and setter for the bubblingKeydown experimental flag.
+   *
+   * @experimental
+   */
+  get bubblingKeydown(): boolean {
+    return this._bubblingKeydown;
+  }
+  set bubblingKeydown(value: boolean) {
+    document.removeEventListener('keydown', this, !this._bubblingKeydown);
+    this._bubblingKeydown = value;
+    document.addEventListener('keydown', this, !this._bubblingKeydown);
+  }
+
   /**
    * Get a plugin description.
    *
@@ -506,6 +520,8 @@ export class Application<T extends Widget = Widget> {
     // Mark the application as started;
     this._started = true;
 
+    this._bubblingKeydown = options.bubblingKeydown || false;
+
     // Parse the host ID for attaching the shell.
     const hostID = options.hostID || '';
 
@@ -606,8 +622,11 @@ export class Application<T extends Widget = Widget> {
    * A subclass may reimplement this method as needed.
    */
   protected addEventListeners(): void {
+    if (this._bubblingKeydown) {
+      console.log('The keydown events are handled during bubbling phase');
+    }
     document.addEventListener('contextmenu', this);
-    document.addEventListener('keydown', this, true);
+    document.addEventListener('keydown', this, !this._bubblingKeydown);
     window.addEventListener('resize', this);
   }
 
@@ -663,6 +682,7 @@ export class Application<T extends Widget = Widget> {
   private _plugins = new Map<string, Private.IPluginData>();
   private _services = new Map<Token<any>, string>();
   private _started = false;
+  private _bubblingKeydown = false;
 }
 
 /**
@@ -715,6 +735,14 @@ export namespace Application {
      * This will override `startPlugins` and any `autoStart` plugins.
      */
     ignorePlugins?: string[];
+
+    /**
+     * Whether to capture keydown event at bubbling or capturing (default) phase for
+     * keyboard shortcuts.
+     *
+     * @experimental
+     */
+    bubblingKeydown?: boolean;
   }
 }
 

review/api/application.api.md

@@ -17,6 +17,8 @@ export class Application<T extends Widget = Widget> {
     activatePlugin(id: string): Promise<void>;
     protected addEventListeners(): void;
     protected attachShell(id: string): void;
+    get bubblingKeydown(): boolean;
+    set bubblingKeydown(value: boolean);
     readonly commands: CommandRegistry;
     readonly contextMenu: ContextMenu;
     deactivatePlugin(id: string): Promise<string[]>;
@@ -46,6 +48,7 @@ export namespace Application {
         shell: T;
     }
     export interface IStartOptions {
+        bubblingKeydown?: boolean;
         hostID?: string;
         ignorePlugins?: string[];
         startPlugins?: string[];