diff --git a/components/lib/overlaypanel/BaseOverlayPanel.vue b/components/lib/overlaypanel/BaseOverlayPanel.vue index 7ffec17001..9f0925da63 100644 --- a/components/lib/overlaypanel/BaseOverlayPanel.vue +++ b/components/lib/overlaypanel/BaseOverlayPanel.vue @@ -33,6 +33,10 @@ export default { closeIcon: { type: String, default: undefined + }, + closeOnEscape: { + type: Boolean, + default: true } }, style: OverlayPanelStyle, diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts index 17b2716796..567f94f0f2 100755 --- a/components/lib/overlaypanel/OverlayPanel.d.ts +++ b/components/lib/overlaypanel/OverlayPanel.d.ts @@ -163,6 +163,11 @@ export interface OverlayPanelProps { * @defaultValue false */ unstyled?: boolean; + /** + * Specifies if pressing escape key should hide the dialog. + * @defaultValue true + */ + closeOnEscape?: boolean | undefined; } /** diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue index 1dd4a27894..a3e47315e3 100755 --- a/components/lib/overlaypanel/OverlayPanel.vue +++ b/components/lib/overlaypanel/OverlayPanel.vue @@ -58,6 +58,7 @@ export default { container: null, styleElement: null, overlayEventListener: null, + documentKeydownListener: null, beforeUnmount() { if (this.dismissable) { this.unbindOutsideClickListener(); @@ -129,6 +130,10 @@ export default { this.focus(); OverlayEventBus.on('overlay-click', this.overlayEventListener); this.$emit('show'); + + if (this.closeOnEscape) { + this.bindDocumentKeyDownListener(); + } }, onLeave() { this.unbindOutsideClickListener(); @@ -186,6 +191,23 @@ export default { focusTarget.focus(); } }, + onKeyDown(event) { + if (event.code === 'Escape' && this.closeOnEscape) { + this.visible = false; + } + }, + bindDocumentKeyDownListener() { + if (!this.documentKeydownListener) { + this.documentKeydownListener = this.onKeyDown.bind(this); + window.document.addEventListener('keydown', this.documentKeydownListener); + } + }, + unbindDocumentKeyDownListener() { + if (this.documentKeydownListener) { + window.document.removeEventListener('keydown', this.documentKeydownListener); + this.documentKeydownListener = null; + } + }, bindOutsideClickListener() { if (!this.outsideClickListener && DomHandler.isClient()) { this.outsideClickListener = (event) => {