Merge pull request #4621 from qburst/master

fix #4620 Overlaypanel: Overlay panel doesnot close on escape button click
primefaces · Oct 17, 2023 · 366f136 · 366f136
2 parents 3feaf72 + 02cbc1e
commit 366f136
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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) => {