Page completely reloads when opening modal

[brenjt]

Anytime I open a modal the page beneath completely reloads and resets it's state. Is there a way to prevent that?

[rvanbaalen]

Now that you mention it, I'm experiencing the same behavior.

[lepikhinb]

Can't confirm without an example code. Please share an example gist or a repo.

Make sure that:

• You're triggering a modal with an Inertia Link instead of a regular a tag.
• In case your app has axios installed, upgrade it to the same version Inertia uses. npm i axios@0.21.4

[MtDalPizzol]

I have the same issue. It becomes clear when I setup page transitions. Then, whenever I open a modal, the page behind it transitions out and in again, because it is completely re-rendered as mentioned.

Already tried npm i axios@0.21.4 with no luck.

[lepikhinb]

@MtDalPizzol please set up an example repository with the issue reproduction.

[MtDalPizzol]

There you go: https://github.com/prontostack/pronto-fuel/tree/momentum-modal

I've been working on this starter kit since before Laravel adopted Vite as the default bundler and now I'm adding some stuff I always end up using and I think momentum-modal would be a great improvement. I've added a momentum-modal branch which contains the exact behavior I described. Be aware that I have upgrade axios though...

[ksassnowski]

I had a look at the PingCRM project that uses modals (https://modal.advanced-inertia.com/) and it looks like you need to add :only=['modal'] to the Inertia link. Once I do that, the page doesn't reload and only the queries necessary for the modal get run. Without only, I have the same problem as described in this issue.

[MtDalPizzol]

@ksassnowski Tried that. Still the same problem...

[MtDalPizzol]

I've also upgraded the inertiajs/inertia-laravel to 0.6.3 so it correctly set the inertia assets version.

[MtDalPizzol]

Found it! What did the trick for me was adding :preserve-state="true" to the Inertia Link. Wouldn't this be the default expected behavior though?

[lepikhinb]

The slideover page doesn't use partial reloads: https://github.com/lepikhinb/momentum-modal-example/blob/master/resources/js/Pages/Organizations/Index.vue

[MtDalPizzol]

Well... I did dig into this for the last few days, and what worked (and made more sense to me), was to create a wrapper DialogLink component that simply sets preserve-state, preserve-scroll and :only=['modal'].

And this is important: :only=['modal'] DOES CHANGE what comes back from the server. So, it seems reasonable to me to always set this, since when it is not present, the JSON that comes back from the server also contains all the data from the baseRoute, which doesn't make sense to me, since the baseRoute is already rendered and should not change when the dialog opens.

Also, I've upgrade axios to the latest version (0.27.2) and everything is working.

<template>
  <Link
    preserve-state
    preserve-scroll
    :only="['modal']"
  >
    <slot />
  </Link>
</template>

[lepikhinb]

@MtDalPizzol

And this is important: :only=['modal'] DOES CHANGE what comes back from the server.

It does since that's how Inertia works. You should load partial data like this (even though it's not necessary), but don't forget making parent page's props Lazy.