Fix for closing nested modals on redirect

See #25
inertiaui · Oct 25, 2024 · 1d70de1 · 1d70de1
1 parent c549981
commit 1d70de1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/demo-app/tests/Browser/NestedModalTest.php b/demo-app/tests/Browser/NestedModalTest.php
@@ -4,18 +4,20 @@
 
 use App\Models\Role;
 use Illuminate\Support\Str;
+use PHPUnit\Framework\Attributes\DataProvider;
 use PHPUnit\Framework\Attributes\Test;
 use Tests\DuskTestCase;
 
 class NestedModalTest extends DuskTestCase
 {
+    #[DataProvider('booleanProvider')]
     #[Test]
-    public function it_can_open_a_second_modal_on_top_of_the_first_one()
+    public function it_can_open_a_second_modal_on_top_of_the_first_one(bool $navigate)
     {
-        $this->browse(function (Browser $browser) {
+        $this->browse(function (Browser $browser) use ($navigate) {
             $firstUser = $browser->firstUser();
 
-            $browser->visit('/users')
+            $browser->visit('/users?'.($navigate ? 'navigate=1' : ''))
                 ->waitForFirstUser()
                 ->click("@edit-user-{$firstUser->id}")
                 ->waitFor('.im-dialog')
@@ -31,7 +33,10 @@ public function it_can_open_a_second_modal_on_top_of_the_first_one()
                 ->within('.im-dialog[data-inertiaui-modal-index="0"]', function (Browser $browser) {
                     // The first modal should not be blurred anymore
                     $browser->assertAttributeDoesntContain('.im-modal-wrapper', 'class', 'blur-sm');
-                });
+                })
+                ->press('Save')
+                ->waitUntilMissingText('Edit User')
+                ->waitUntilMissing('.im-dialog');
         });
     }
 

diff --git a/react/src/ModalRoot.jsx b/react/src/ModalRoot.jsx
@@ -15,7 +15,6 @@ let pageVersion = null
 let resolveComponent = null
 let baseUrl = null
 let newModalOnBase = null
-let localStackCopy = []
 
 export const ModalStackProvider = ({ children }) => {
     const [stack, setStack] = useState([])
@@ -67,10 +66,6 @@ export const ModalStackProvider = ({ children }) => {
         })
     }
 
-    useEffect(() => {
-        localStackCopy = stack
-    }, [stack])
-
     class Modal {
         constructor(component, response, modalProps, onClose, afterLeave) {
             this.id = Modal.generateId()
@@ -129,7 +124,6 @@ export const ModalStackProvider = ({ children }) => {
         }
 
         close = () => {
-            console.log('Closing', this.id)
             updateStack((prevStack) =>
                 prevStack.map((modal) => {
                     if (modal.id === this.id && modal.isOpen) {
@@ -146,7 +140,6 @@ export const ModalStackProvider = ({ children }) => {
         }
 
         afterLeave = () => {
-            console.log('After leave', this.id)
             if (this.isOpen) {
                 return
             }
@@ -377,8 +370,7 @@ export const ModalStackProvider = ({ children }) => {
         push,
         pushFromResponseData,
         closeAll: () => {
-            console.log('Closing all modals', { stack, localStackCopy })
-            localStackCopy.reverse().forEach((modal) => modal.close())
+            [...stack].reverse().forEach((modal) => modal.close())
         },
         reset: () => updateStack(() => []),
         visit,

diff --git a/vue/src/inertiauiModal.js b/vue/src/inertiauiModal.js
@@ -5,7 +5,6 @@ import Modal from './Modal.vue'
 import ModalLink from './ModalLink.vue'
 import ModalRoot from './ModalRoot.vue'
 
-// TODO: Move this to modalStack.js + Add test for navigate option
 function visitModal(url, options = {}) {
     return useModalStack().visit(
         url,

diff --git a/vue/src/modalStack.js b/vue/src/modalStack.js
@@ -328,7 +328,7 @@ export function useModalStack() {
         stack: readonly(stack),
         push,
         pushFromResponseData,
-        closeAll: () => stack.value.reverse().forEach((modal) => modal.close()),
+        closeAll: () => [...stack.value].reverse().forEach((modal) => modal.close()),
         reset: () => (stack.value = []),
         visit,
         registerLocalModal,