Nested modal redirect fix (#27)

Co-authored-by: pascalbaljet <[email protected]>
inertiaui · Oct 25, 2024 · a336003 · a336003
1 parent c549981
commit a336003
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 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
@@ -129,7 +129,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 +145,6 @@ export const ModalStackProvider = ({ children }) => {
         }
 
         afterLeave = () => {
-            console.log('After leave', this.id)
             if (this.isOpen) {
                 return
             }
@@ -377,7 +375,6 @@ export const ModalStackProvider = ({ children }) => {
         push,
         pushFromResponseData,
         closeAll: () => {
-            console.log('Closing all modals', { stack, localStackCopy })
             localStackCopy.reverse().forEach((modal) => modal.close())
         },
         reset: () => updateStack(() => []),

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,