Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
06. Redirecting on close

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
So the nature of the way that this modal works is that when we click on a modal, we of course go through to the route that we registered in our web routes. Now, this is great because it means
00:12
that you can redirect people to specific pages. For example, if this was a login modal, you'd want to tell a user to go to slash login and then show this, for example, when you're
00:21
linking through to your site. But when we close the modal, notice that the URL stays. That means that for a user who has just closed off a modal, if they refresh the page, we're going
00:33
to get the modal back up again. And it's not great user experience, and it can be really, really annoying. So we're going to look now at how
00:39
we can redirect the user back to where they started once the modal gets closed off. Now, we need to think about where we need to do this. So let's take a look at the modal.
00:50
When I close the modal off, when do we want to redirect? Well, we want to redirect when the whole thing has finished transitioning and it's completely closed off. So again, what we're going to do is
01:01
lean on a hook directly from one of the components from headless UI, and that is the transition child. Now, what we have in here is an event called after leave. So we know that we've got our leave transitions.
01:15
We basically want this to happen when the opacity is at zero and the modal is no longer visible. So we can do this on here or the other one. It doesn't really matter.
01:23
So after we leave this modal and it's fully transitioned to the point where it's disappeared, then we want to redirect the user to where they came from. Now, how do we redirect?
01:34
Well, again, very, very simple. With this package, it exposes a redirect function that we can call. So let's go ahead and add that redirect function just into
01:44
here, and we should be good. So let's take a look at the behavior of this now. I'm going to head back to the dashboard. I'm going to open the modal.
01:53
Of course, the URL changes. When I close this, after we have finished, you see there was a slight delay. After we have finished transitioning this
02:01
and it's disappeared, then we're back on the dashboard. That now means that if a user closes the modal and we refresh the page, we, of course, see the page, and we don't see that modal reappear.
02:12
So there we go. Again, really, really easy to work with this. We just need to know where to trigger this from, and the most sensible way to do this
02:18
is when the transition finishes, and then we just invoke redirect, which takes us back to the page that we ended up on, which is much nicer in terms of user experience.

Episode summary

In this episode, we tackle a common annoyance when working with modals that use their own route. You might have noticed that when you close a modal (like a login dialog), the URL often stays the same, even after the modal disappears. This means if a user refreshes the page after closing the modal, it pops right back up – not what we want!

So, we walk through how to fix this so that once the modal has finished closing (including any nice fade-out transitions), the user is automatically redirected back to the page they started from. To do this, we use the afterLeave event provided by Headless UI’s transition component. This way, the redirect only happens after the modal has fully transitioned out, which makes everything look smooth and intentional.

Finally, we add a simple redirect function, check out the improved behavior, and make sure that refreshing the page after closing the modal doesn’t bring it back. The result? A much nicer user experience with just a tiny bit of extra code!

Episode discussion

No comments, yet. Be the first!