Fixed #77 - Modal dialog not blocking background

primefaces · Nov 1, 2019 · 98f9ab2 · 98f9ab2
1 parent 50713d5
commit 98f9ab2
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -50,6 +50,10 @@ export default {
         }
     },
     mask: null,
+    documentKeydownListener: null,
+    destroyed() {
+        //this.unbindDocumentKeydownListener();  
+    },
     methods: {
         close() {
             this.$emit('update:visible', false);
@@ -85,13 +89,56 @@ export default {
                 DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-dialog-mask p-fadein');
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                this.bindDocumentKeydownListener();
             }
         },
         disableModality() {
             if (this.mask) {
                 document.body.removeChild(this.mask);
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 this.mask = null;
+                this.unbindDocumentKeydownListener();
+            }
+        },
+        onKeyDown(event) {
+            if (event.which === 9) {
+                event.preventDefault();
+                
+                let focusableElements = DomHandler.getFocusableElements(this.$refs.container);
+
+                if (focusableElements && focusableElements.length > 0) {
+                    if (!document.activeElement) {
+                        focusableElements[0].focus();
+                    }
+                    else {
+                        let focusedIndex = focusableElements.indexOf(document.activeElement);
+
+                        if (event.shiftKey) {
+                            if (focusedIndex == -1 || focusedIndex === 0)
+                                focusableElements[focusableElements.length - 1].focus();
+                            else
+                                focusableElements[focusedIndex - 1].focus();
+                        }
+                        else {
+                            if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
+                                focusableElements[0].focus();
+                            else
+                                focusableElements[focusedIndex + 1].focus();
+                        }
+                    }
+                }
+            }
+        },
+        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;
             }
         }
     },

diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
@@ -384,4 +384,21 @@ export default class DomHandler {
     static invokeElementMethod(element, methodName, args) {
         (element)[methodName].apply(element, args);
     }
+
+    static getFocusableElements(element) {
+        let focusableElements = DomHandler.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
+                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
+                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
+                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
+                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])`
+            );
+
+        let visibleFocusableElements = [];
+        for (let focusableElement of focusableElements) {
+            if (getComputedStyle(focusableElement).display != "none" && getComputedStyle(focusableElement).visibility != "hidden")
+                visibleFocusableElements.push(focusableElement);
+        }
+
+        return visibleFocusableElements;
+    }
 }