fix(esl-toggleable): improve outside keyboard events handling

exadel-inc · Dec 23, 2021 · 38160b6 · 38160b6
1 parent 5faeb1a
commit 38160b6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/pages/src/navigation/sidebar/sidebar.ts b/pages/src/navigation/sidebar/sidebar.ts
@@ -88,7 +88,7 @@ export class ESLDemoSidebar extends ESLToggleable {
   }
 
   @bind
-  protected _onOutsideAction(e: MouseEvent) {
+  protected _onOutsideAction(e: Event) {
     if (ESLMediaQuery.for('@+MD').matches) return;
     super._onOutsideAction(e);
   }

diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts
@@ -1,5 +1,5 @@
 import {ExportNs} from '../../esl-utils/environment/export-ns';
-import {ESC} from '../../esl-utils/dom/keys';
+import {ESC, SYSTEM_KEYS} from '../../esl-utils/dom/keys';
 import {CSSClassUtils} from '../../esl-utils/dom/class';
 import {bind} from '../../esl-utils/decorators/bind';
 import {defined, copyDefinedKeys} from '../../esl-utils/misc/object';
@@ -134,11 +134,11 @@ export class ESLToggleable extends ESLBaseElement {
 
   /** Bind outside action event listeners */
   protected bindOutsideEventTracking(track: boolean) {
-    document.body.removeEventListener('keypress', this._onOutsideAction, true);
+    document.body.removeEventListener('keydown', this._onOutsideAction, true);
     document.body.removeEventListener('mouseup', this._onOutsideAction, true);
     document.body.removeEventListener('touchend', this._onOutsideAction, true);
     if (track) {
-      document.body.addEventListener('keypress', this._onOutsideAction, true);
+      document.body.addEventListener('keydown', this._onOutsideAction, true);
       document.body.addEventListener('mouseup', this._onOutsideAction, true);
       document.body.addEventListener('touchend', this._onOutsideAction, true);
     }
@@ -258,17 +258,19 @@ export class ESLToggleable extends ESLBaseElement {
   }
 
   @bind
-  protected _onClick(e: PointerEvent) {
+  protected _onClick(e: MouseEvent) {
     const target = e.target as HTMLElement;
     if (this.closeTrigger && target.closest(this.closeTrigger)) {
       this.hide({initiator: 'close', activator: target, event: e});
     }
   }
+
   @bind
   protected _onOutsideAction(e: Event) {
     const target = e.target as HTMLElement;
     if (this.contains(target)) return;
     if (this.activator && this.activator.contains(target)) return;
+    if (e instanceof KeyboardEvent && SYSTEM_KEYS.includes(e.key)) return;
     // Used 0 delay to decrease priority of the request
     this.hide({initiator: 'outsideaction', hideDelay: 0, event: e});
   }

diff --git a/src/modules/esl-utils/dom/keys.ts b/src/modules/esl-utils/dom/keys.ts
@@ -20,3 +20,5 @@ export const ARROW_LEFT = 'ArrowLeft';
 export const ARROW_UP = 'ArrowUp';
 export const ARROW_RIGHT = 'ArrowRight';
 export const ARROW_DOWN = 'ArrowDown';
+
+export const SYSTEM_KEYS = [TAB, ALT, SHIFT, CONTROL, PAGE_UP, PAGE_DOWN, ARROW_LEFT, ARROW_UP, ARROW_RIGHT, ARROW_DOWN];