frayerjj-frontend 0.8.8 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",

package/src/modal.js

@@ -32,11 +32,14 @@ export const modal = {
                     }));
                     let ajaxModal = document.getElementById(randomId),
                         ajaxModalBody = ajaxModal.querySelector('.modal-body');
-                    ajaxModal.addEventListener('hidden.bs.modal', ev => {
+                    ajaxModal.addEventListener('hide.bs.modal', ev => {
                         modal.focusFix();
+                    });
+                    ajaxModal.addEventListener('hidden.bs.modal', ev => {
                         ev.target.remove();
                     });
                     let bsAjaxModal = Modal.getOrCreateInstance(ajaxModal);
+                    modal._lastFocus = document.activeElement;
                     bsAjaxModal.show();
                     loading.start(0, ajaxModalBody);
                     msg.verbose('Loading AJAX Modal');
@@ -91,7 +94,7 @@ export const modal = {
 
     alert: (messsage, title = "Alert", button = "OK") => {
         msg.verbose('Building Alert Modal');
-        let randomId = modal.randomId('confirm');
+        let randomId = modal.randomId('alert');
         document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
             id: randomId,
             title: title,
@@ -100,11 +103,13 @@ export const modal = {
         }));
         let alertModal = document.getElementById(randomId),
             bsAlertModal = Modal.getOrCreateInstance(alertModal);
-        alertModal.addEventListener('hidden.bs.modal', ev => {
+        alertModal.addEventListener('hide.bs.modal', ev => {
             modal.focusFix();
+        });
+        alertModal.addEventListener('hidden.bs.modal', ev => {
             ev.target.remove();
         });
-        modal.close();
+        modal._lastFocus = document.activeElement;
         bsAlertModal.show();
     },
 
@@ -276,8 +281,10 @@ export const modal = {
         }));
         let confirmModal = document.getElementById(randomId),
             bsConfirmModal = Modal.getOrCreateInstance(confirmModal);
-        confirmModal.addEventListener('hidden.bs.modal', ev => {
+        confirmModal.addEventListener('hide.bs.modal', ev => {
             modal.focusFix();
+        });
+        confirmModal.addEventListener('hidden.bs.modal', ev => {
             ev.target.remove();
         });
         confirmModal.querySelector('.btn-confirm').addEventListener('click', () => {
@@ -286,13 +293,21 @@ export const modal = {
         confirmModal.querySelector('.btn-outline-danger').addEventListener('click', () => {
             onCancel();
         });
-        modal.close();
+        modal._lastFocus = document.activeElement;
         bsConfirmModal.show();
     },
 
     focusFix: () => {
-        if (document.activeElement === document.body || !document.activeElement)
-            document.querySelector('main') ?.focus() || document.body.focus();
+        setTimeout(() => {
+            if (modal._lastFocus && document.contains(modal._lastFocus)) {
+                modal._lastFocus.focus();
+                return;
+            }
+            const fallback = document.querySelector('main') || document.body;
+            if (!fallback.hasAttribute('tabindex'))
+                fallback.setAttribute('tabindex', '-1');
+            fallback.focus();
+        }, 0);
     },
 
     randomId: (base = 'modal') => {