Building Modals in Livewire
This episode is for members only

Sign up to access "Building Modals in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
08. Resetting state when a modal closes

Episodes

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

Transcript

00:00
OK, let's talk about resetting state when we close our modal or perform any other action.
00:06
So if I open the first modal, we know that we built this increment counter here. When we close this off, exit out of the modal, and we open it back up, obviously,
00:16
we keep the same value in here because we haven't refreshed the page, and that data is still being stored. Even when we get to the point where we go ahead and get
00:25
to 10, where we know that that triggers a modal close, we still have that value in there. So what we're going to add is a really simple dispatch to our isModal trait when we hide this modal.
00:38
And what that will do is allow us to pick up on any of the modals to detect when this has been hidden. Now, we've already seen an example of dispatching to a self, so the component that we're currently
00:49
working with. So we can very easily do this in here. So we're going to go ahead and dispatch an event, and we're just going to call this hidden,
00:57
or you could call it hasHidden, whatever you decide. And we're going to dispatch that to self. So whichever trait this is being used on, whichever modal this trait is using,
01:08
it's going to dispatch only to that component. OK, so let's take a look at an example of the first modal then. So let's open up the first modal class here.
01:18
And in here, we can basically just add in a listener for that event. So let's go ahead and say on and hidden, and then we can just do something in here.
01:29
So let's go ahead and say clean up, and then we can just do something. So in our case, that would be resetting the counter back to zero.
01:39
So basically, when we dispatch hide, that's going to call that hide method over on here. Then it's going to tell us that this has been hidden, and then back here or anywhere else,
01:52
we can detect that this has successfully been hidden and reset the state. Let's try this out. So I'm going to go ahead and increment this all the way up
02:00
to 10. That goes, and then we come back and we set back to zero. So a really simple solution here to just fire off an event and say this modal has been hidden.
02:11
Please clear up the state. Now, there is a caveat here. Just before we do that, we want to make sure that in the second modal, this isn't taking effect.
02:20
So I'm pretty much going to take what we're doing on the first modal with this counter, and we're going to just keep these two modals independent of each other, doing their own thing
02:31
and incrementing this value. So I'm going to go ahead and take this and put this increment method in here. We'll get rid of this because we just
02:37
want to make sure that the state remains the same for our second modal as well. And if we come over to our first modal, let's just grab the part where we're outputting our counter
02:46
and also incrementing. So we'll just add that to our second modal here, and we should be good. So let's just wrap this in a div real quick and head over.
02:57
OK, so in the second modal, I'm going to increment this up to five or six, head over to the first modal, increment this to 10, which we know is going to dispatch that event
03:06
and clear out the state of this. On our second modal, sure enough, we still see six. So each of our modals is independently keeping their state.
03:15
That hidden event that we dispatch isn't having any effect on any other modal. It's just listening to that first one. And then let's head over to our second modal
03:26
and implement that same hidden cleanup method because that is what we want to make sure isn't triggering on the second modal as well. So we add this into here.
03:39
We'll just pull the attribute in, and let's head over and test this out. So I'm going to increment the first one up to about six, increment the second one up to about seven,
03:49
and then over on the first modal, let's go to 10. That has cleared out the state of this one, but this one is unaffected. So we know that despite dispatching that hidden event,
03:59
it's only taking effect on the modal because we've used that self modifier. OK, great, so that's working nicely. Let's go and look at the caveat that we have here,
04:09
and we will get this working in a slightly different way. So over in our first modal, we know that this works to reset the state because we are going ahead and dispatching the hide method,
04:20
which is calling hide. When I click close, though, let's just go and say five. Closing that off is keeping the state. Now, you might want to keep this behavior.
04:31
That might be how you want this to work, but if you don't, what you're going to need to do is when you press close or click outside of here, you're going to want to go ahead and dispatch that hide
04:42
event to this component rather than just setting the visible value, which we have entangled, back to false because that's not calling that method at all. Now, there are a couple of different ways
04:53
that we can actually achieve this. So if we head over to isModal, we know that hide isn't being called when we click outside of here.
05:03
Now, let's just remind ourselves why. And if we head over to our modal wrapper, that is just because when we either press escape or something like that, we're
05:11
just setting the visible value back to false, which is feeding through into our property up here. So it's not touching this hide method at all.
05:23
So there's a couple of ways that we could get around this. We could add in here a lifecycle hook to detect when visible is set to false, and then we could automatically call the hide method.
05:35
But that kind of doesn't make sense because the hide method is responsible for setting visible to false. So you could do that just depending
05:43
on if you wanted to switch this around a little bit later on. But what we're actually going to do is we're going to swap out this visible setting or assignment to false, and we're
05:54
going to swap that with calling the hide method or sending out a hide event. Now, we know how to do that because we've already done that, for example, within here,
06:04
where we dispatch to a specific component, and then we dispatch an event. So we could actually just do that inside of here. And let's go ahead and look at see how this is going to work.
06:15
So let's just work with the Escape key for now, and then we'll change the other one down here around in a minute. So I'm going to go ahead and paste this in.
06:22
So, well, I'm not. I'm going to just get rid of this and this. Obviously, we don't have a click event here. We just have a window key event.
06:31
So we want to dispatch to a certain component. Now, that's the problem here. We want to dispatch the hide event, but how do we know, with this generic modal wrapper that
06:43
works with all of our modals, which component to dispatch this to? Well, in that case, what we can actually do is we can get the name of the current component
06:53
that we're working with, the current component that's using this modal wrapper, and we can put it basically straight in here. So we can go ahead and say this getName.
07:04
Now, just to give you an idea of what that actually looks like, let's put this down here just above our slot content, just so we can see what this looks like. So if I open up the first modal, we get modals.firstModal.
07:17
And if we open up the second modal, sure enough, we get modals.secondModal. So we can use the name of this component to fire an event to that component
07:25
to hide just that modal. So let's go ahead and do this with this as well when we click on the outside area, like so. And let's try this out.
07:36
So if I open up the first modal and I press Escape, and that doesn't look like it's working. Let's just have a look here. Ah, yeah, so we need to go ahead,
07:43
because we're working with an Alpine here, we need to use that live wire dispatch to null, much like we did from our dashboard. There probably is another way to do this.
07:53
We can refactor that later. But let's just switch this over now so at least we can get it working. And there we go.
08:00
OK, so let's try this out again. And we should be able to hit Escape and close that off or click outside and close that off. The difference now is because we're dispatching that event
08:10
and we're picking that up within our isModal tray, what that means is when I exit this, that's automatically going to reset the state because it's calling that hide method, which then dispatches that hidden,
08:21
and then that resets the state for us. So hopefully that makes sense. I'm going to leave it like this, but of course, feel free to change this around.
08:29
You might just want the default functionality of when you click outside of here, just hiding the modal but keeping the state behind the scenes.
08:37
But you might want something like your increment or, in your case, submitting a form to go ahead and reset the state once it's done. And of course, you can just dispatch this hidden event
08:47
from anywhere. So you could dispatch that manually from within your components if you needed to to clear up your state.

Episode summary

In this episode, we tackle how to properly reset your state when a modal closes—whether that's from pressing Escape, clicking outside the modal, or hitting a "Close" button. Up until now, we've seen that closing a modal doesn't automatically reset things like counters or form fields, unless you refresh the page. We want a smoother experience where every time the modal opens, it's fresh.

To solve this, we introduce event dispatching! Specifically, when the modal hides (closes), we dispatch a hidden event back to just that component. Listeners can then respond to this by resetting any state, like setting a counter back to zero. You see this in action with multiple modals: closing one only resets its own state, not the state of other open modals—everything stays independent.

We discuss some caveats, such as what happens if you close the modal by clicking outside or using the Escape key, which in our existing setup didn't trigger the reset logic. To fix this, we make sure those interactions also dispatch the hide event so the state always gets cleaned up. There's a little Livewire/Alpine.js coordination to make it all work, and we show you how to get the current component name dynamically to target the right modal.

By the end of the video, you’ll know how to ensure your modals always clean up after themselves—no leftover state, no surprises—whether you’re incrementing counters or resetting forms. You’ll also pick up some tricks about scoped event handling in component systems. Enjoy!

Episode discussion

No comments, yet. Be the first!