refactor: make modal focus trap switchable (#31)

Author: leMaur

resources/assets/js/modal.js

@@ -14,9 +14,12 @@ const Modal = {
     defaultSettings: {
         reserveScrollBarGap: true,
         reserveNavScrollBarGap: true,
+        disableFocusTrap: false,
     },
 
-    onModalOpened(scrollable, settings = Modal.defaultSettings) {
+    onModalOpened(scrollable, settings = {}) {
+        settings = Object.assign({}, this.defaultSettings, settings);
+
         if (settings.reserveScrollBarGap) {
             this.reserveModalScrollBarGap(scrollable);
         }
@@ -29,10 +32,16 @@ const Modal = {
             reserveScrollBarGap: !!settings.reserveScrollBarGap,
         });
 
-        this.trapFocus(scrollable);
+        if (settings.disableFocusTrap) {
+            scrollable.focus();
+        } else {
+            this.trapFocus(scrollable);
+        }
     },
 
-    onModalClosed(scrollable, settings = Modal.defaultSettings) {
+    onModalClosed(scrollable, settings = {}) {
+        settings = Object.assign({}, this.defaultSettings, settings);
+
         if (settings.reserveScrollBarGap) {
             this.restoreModalScrollBarGap(scrollable);
         }
@@ -69,11 +78,7 @@ const Modal = {
         this.trappedElement = null;
     },
 
-    alpine(
-        extraData = {},
-        modalName = "",
-        eventSettings = Modal.defaultSettings
-    ) {
+    alpine(extraData = {}, modalName = "", eventSettings = {}) {
         return {
             name: modalName,
             shown: false,
@@ -146,7 +151,7 @@ const Modal = {
         };
     },
 
-    livewire(extraData = {}, eventSettings = Modal.defaultSettings) {
+    livewire(extraData = {}, eventSettings = {}) {
         return {
             init() {
                 const scrollable = this.getScrollable();

usage/ui.md

@@ -269,6 +269,13 @@ To use the Livewire modals, use the `ARKEcosystem\UserInterface\Http\Livewire\Co
 
 **Important**: If you need to use a different variable to close the modal, or you can't make use of the trait for a reason, make sure to emit the `modalClosed` event as that is required for proper handling of the modals on the frontend! If you fail to emit this event, the browser window will not be scrollable after the modal disappears.
 
+You can disable the focus trap by passing a parameter in the second argument:
+```php
+<div x-data="Modal.livewire({{ $extraData }}, [\"disableFocusTrap\" => true])">
+    <!--...-->
+</div>
+```
+
 #### Alpine modals
 
 **Important**: for the modals to work properly, they expect a `nav` element inside a `header` element to be used for the header component. If you use the navbar from the UI lib (see `navbar.blade.php`) these elements are already used, but for custom navbars you may need to make adjustments.
@@ -347,6 +354,19 @@ import Modal from "@ui/js/modal";
 window.Modal = Modal;
 ```
 
+You can disable the focus trap by passing a parameter in the third argument:
+```js
+import Modal from "@ui/js/modal";
+
+window.Modal = Modal;
+
+Modal.alpine(
+    {}, // extra data 
+    '', // modal name 
+    { disableFocusTrap: true } // <-- disable focus trap
+)
+```
+
 ### Tooltips
 
 1. Install `tippy.js`