Redirecting from one modal to another

[grantholle]

I've got two modals that share the same base url/route. In one modal, I'm making doing a form.put(), where the redirect should be a new modal.

It's currently sending the right redirect response from the first (as far as I can tell), and is GET calling the correct url of the second modal, but then it immediately GETs the base url.

[grantholle]

In my PUT action, if I return Inertia::location($mySecondModalUrl) it does load the second modal page without immediately going to the base url. Not ideal, but it achieves the functionality.

[lepikhinb]

IMO you should stick to 1 route = 1 modal, since that's the point of the package.

[grantholle]

Do you mean 1 route = 1 base url? Because my modals are on different routes.

[grantholle]

Or one modal per base route is more accurate.

My modals are on different routes, but they all share the same base url.

[lepikhinb]

Ah, I probably misread the message. I'm going to investigate the issue soon. It would help a lot if you can set up a reproduction repository.

[grantholle]

Sure, I will try recreate it

[lumore]

Can confirm. Reproduction repo: https://github.com/lumore/momentum-modal-navigation-issue-example

[fira03079508]

I'm having a very similar issue. I have a link that go to the "forgot password" modal

If I click on the forgot password link, the route redirects to the right route. But It doesn't do anything. If I click a second time: The forgot password modal loads :

Same thing on my register modal. I have a link "Already registered?" that goes to the login modal but I have to click 2 times for it to load

[wPatrick]

I have encountered the same problem. In my case, the "X-Inertia-Modal-*" headers were not set. So it is clearly an axios problem. After I corrected the axios version as suggested in the installation instructions, it worked.

I think this can be closed but maybe the documentation could address this clearly.

[grantholle]

I'm aliasing axios, so everything that needs it is using the same version.

export default defineConfig({
  resolve: {
    alias: {
      axios: path.resolve(__dirname, 'node_modules/axios/dist/axios.js'),
    }
  },
  //
})

[emargareten]

👀

[lumore]

You should use the same version of axios as Inertia uses, that's written in docs. This should fix the problem.

Warning The package utilizes axios under the hood. If your app is already using axios as a dependency, make sure to lock it to the same version Inertia uses.

npm i [email protected]

[grantholle]

@lumore Not if you use an alias as mentioned in my previous comment.

I encountered an issue with Axios interceptors as discussed here, and if you correctly alias Axios, it resolves the issue.

[lepikhinb]

@lumore thanks for the clarification

@grantholle feel free to re-open the issue if the problem persists

The package has just been updated to support Inertia.js v.1.0. Make sure to update to the latest version.