Sync React/Vue navigate hook

Author: pascalbaljet

demo-app/tests/Browser/FormTest.php

@@ -23,7 +23,11 @@ public function it_can_submit_a_form_from_within_the_modal_and_show_the_validati
                 ->waitForTextIn('.im-modal-content', 'Edit User')
                 ->type('name', 'a')
                 ->press('Save')
-                ->waitForTextIn('.im-modal-content', 'The name field must be at least 3 characters.');
+                ->waitForTextIn('.im-modal-content', 'The name field must be at least 3 characters.')
+                ->within('.im-dialog[data-inertiaui-modal-index="0"]', function (Browser $browser) {
+                    $browser->assertSee('The name field must be at least 3 characters.');
+                })
+                ->assertMissing('.im-dialog[data-inertiaui-modal-index="1"]');
         });
     }
 

demo-app/tests/ModalTestCase.php

@@ -7,8 +7,8 @@ trait ModalTestCase
     public static function booleanProvider(): array
     {
         return [
-            [true],
-            [false],
+            'true' => [true],
+            'false' => [false],
         ];
     }
 }

vue/src/ModalRoot.vue

@@ -1,44 +1,27 @@
 <script setup>
-import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
+import { onBeforeMount, onUnmounted, ref } from 'vue'
 import { router } from '@inertiajs/vue3'
-import { usePage } from '@inertiajs/vue3'
 import { useModalStack } from './modalStack'
 import ModalRenderer from './ModalRenderer.vue'
 import { default as Axios } from 'axios'
 
 const modalStack = useModalStack()
 
 const isNavigating = ref(false)
+const previousModalOnBase = ref(null)
+
 onUnmounted(router.on('start', () => (isNavigating.value = true)))
 onUnmounted(router.on('finish', () => (isNavigating.value = false)))
+onUnmounted(
+    router.on('navigate', ($event) => {
+        const modalOnBase = $event.detail.page.props._inertiaui_modal
 
-const axiosRequestInterceptor = (config) => {
-    // A Modal is opened on top of a base route, so we need to pass this base route
-    // so it can redirect back with the back() helper method...
-    config.headers['X-InertiaUI-Modal-Base-Url'] = modalStack.getBaseUrl()
-
-    return config
-}
-
-onBeforeMount(() => {
-    Axios.interceptors.request.use(axiosRequestInterceptor)
-})
-
-onUnmounted(() => {
-    Axios.interceptors.request.eject(axiosRequestInterceptor)
-})
-
-const $page = usePage()
-
-watch(
-    () => $page.props?._inertiaui_modal,
-    (modalOnBase) => {
         if (!modalOnBase) {
-            modalStack.closeAll()
+            previousModalOnBase.value && modalStack.closeAll()
             return
         }
 
-        // TODO: Is this really necessary?
+        previousModalOnBase.value = modalOnBase
         modalStack.setBaseUrl(modalOnBase.baseUrl)
 
         modalStack.pushFromResponseData(modalOnBase, {}, () => {
@@ -54,9 +37,24 @@ watch(
                 })
             }
         })
-    },
-    { immediate: true },
+    }),
 )
+
+const axiosRequestInterceptor = (config) => {
+    // A Modal is opened on top of a base route, so we need to pass this base route
+    // so it can redirect back with the back() helper method...
+    config.headers['X-InertiaUI-Modal-Base-Url'] = modalStack.getBaseUrl()
+
+    return config
+}
+
+onBeforeMount(() => {
+    Axios.interceptors.request.use(axiosRequestInterceptor)
+})
+
+onUnmounted(() => {
+    Axios.interceptors.request.eject(axiosRequestInterceptor)
+})
 </script>
 
 <template>