diff --git a/src/components/popover/index.ts b/src/components/popover/index.ts index 943569c4a..ac7d686fc 100644 --- a/src/components/popover/index.ts +++ b/src/components/popover/index.ts @@ -22,6 +22,7 @@ class Popover implements PopoverInterface { _options: PopoverOptions; _popperInstance: PopperInstance; _clickOutsideEventListener: EventListenerOrEventListenerObject; + _keydownEventListener: EventListenerOrEventListenerObject; _visible: boolean; constructor( @@ -111,6 +112,27 @@ class Popover implements PopoverInterface { } } + _setupKeydownListener() { + this._keydownEventListener = (ev: KeyboardEvent) => { + if (ev.key === 'Escape') { + this.hide(); + } + }; + document.body.addEventListener( + 'keydown', + this._keydownEventListener, + true + ); + } + + _removeKeydownListener() { + document.body.removeEventListener( + 'keydown', + this._keydownEventListener, + true + ); + } + _setupClickOutsideListener() { this._clickOutsideEventListener = (ev: MouseEvent) => { this._handleClickOutside(ev, this._targetEl); @@ -171,6 +193,9 @@ class Popover implements PopoverInterface { // handle click outside this._setupClickOutsideListener(); + // handle esc keydown + this._setupKeydownListener(); + // Update its position this._popperInstance.update(); @@ -197,6 +222,9 @@ class Popover implements PopoverInterface { // handle click outside this._removeClickOutsideListener(); + // handle esc keydown + this._removeKeydownListener(); + // set visibility to false this._visible = false; diff --git a/src/components/popover/interface.ts b/src/components/popover/interface.ts index 93904ca60..2a3a17848 100644 --- a/src/components/popover/interface.ts +++ b/src/components/popover/interface.ts @@ -11,10 +11,13 @@ export declare interface PopoverInterface { _options: PopoverOptions; _popperInstance: PopperInstance; _clickOutsideEventListener: EventListenerOrEventListenerObject; + _keydownEventListener: EventListenerOrEventListenerObject; _setupEventListeners(): void; _setupClickOutsideListener(): void; _removeClickOutsideListener(): void; + _setupKeydownListener(): void; + _removeKeydownListener(): void; _handleClickOutside(ev: Event, targetEl: HTMLElement): void; _getTriggerEvents( triggerType: PopoverTriggerType diff --git a/src/components/tooltip/index.ts b/src/components/tooltip/index.ts index f557ef96f..09471e4f8 100644 --- a/src/components/tooltip/index.ts +++ b/src/components/tooltip/index.ts @@ -21,6 +21,7 @@ class Tooltip implements TooltipInterface { _options: TooltipOptions; _popperInstance: PopperInstance; _clickOutsideEventListener: EventListenerOrEventListenerObject; + _keydownEventListener: EventListenerOrEventListenerObject; _visible: boolean; constructor( @@ -95,6 +96,27 @@ class Tooltip implements TooltipInterface { } } + _setupKeydownListener() { + this._keydownEventListener = (ev: KeyboardEvent) => { + if (ev.key === 'Escape') { + this.hide(); + } + }; + document.body.addEventListener( + 'keydown', + this._keydownEventListener, + true + ); + } + + _removeKeydownListener() { + document.body.removeEventListener( + 'keydown', + this._keydownEventListener, + true + ); + } + _setupClickOutsideListener() { this._clickOutsideEventListener = (ev: MouseEvent) => { this._handleClickOutside(ev, this._targetEl); @@ -154,6 +176,9 @@ class Tooltip implements TooltipInterface { // handle click outside this._setupClickOutsideListener(); + // handle esc keydown + this._setupKeydownListener(); + // Update its position this._popperInstance.update(); @@ -180,6 +205,9 @@ class Tooltip implements TooltipInterface { // handle click outside this._removeClickOutsideListener(); + // handle esc keydown + this._removeKeydownListener(); + // set visibility this._visible = false; diff --git a/src/components/tooltip/interface.ts b/src/components/tooltip/interface.ts index b228acd96..3372bc7a3 100644 --- a/src/components/tooltip/interface.ts +++ b/src/components/tooltip/interface.ts @@ -11,11 +11,14 @@ export declare interface TooltipInterface { _options: TooltipOptions; _popperInstance: PopperInstance; _clickOutsideEventListener: EventListenerOrEventListenerObject; + _keydownEventListener: EventListenerOrEventListenerObject; _init(): void; _setupEventListeners(): void; _setupClickOutsideListener(): void; _removeClickOutsideListener(): void; + _setupKeydownListener(): void; + _removeKeydownListener(): void; _handleClickOutside(ev: Event, targetEl: HTMLElement): void; _getTriggerEvents( triggerType: TooltipTriggerType