Next up I want to add two new features to our Model component. One is to close the Model when you click outside of it and one is to close the Model when you hit the escape key on your keyboard. So let's add those. Our Model component has this show property and this is controlled from the outside. So the parent component decides whether the Model is shown or not.

So the parent component decides whether the model is shown or not. And it also means that the modal component can't close itself, but we can emit an event that the parent can listen for. So let's define those. emit is equals define emits. And I'm gonna call this event close that I'm adding a little help function, which is also called close, where we simply emit this event.

that I'm adding a little help function, which is also called close, where we simply emit this event. And we want to call this function whenever you click on the backdrop. So let's scroll to the backdrop. Here it is. So on click we want to call this close function. And then on the index page we need to listen for that event. So here we have our model component. We are gonna add this event listener, add close, and we are gonna reset the editingUser state to false.

We are gonna add this event listener, add close, and we are gonna reset the editing user state to false. But actually I think we have a helper method for this closeModal. So instead of doing this, I'm simply calling closeModal. Let's hit save, let's go to the browser, refresh and see if it works. Edit a modal. I can click inside of the modal that all works. But if I click outside of the modal, there it goes. So that's great. Let's continue with the escape key.

But if I click outside of the mode, there it goes. So that's great. Let's continue with the escape key. So in our mode component, we want some kind of event listener that listens to all the keyboard events. Let's first start with the listener itself. I'm calling it closeOnEscape. It's gonna accept the event and we're gonna implement it later on. So now we just have this dummy function, then we're gonna use unmounted.

So now we just have this dummy function, then we're gonna use unmounted. So when this modal component gets mounted, we want to add an event listener. We want to listen for the key down event and bind this new closeOnEscape method. And actually when the modal gets unmounted, we want to do the opposite, so we want to remove it. So on unmounted, instead of addEventListener, we're gonna use removeEventListener.

So on unmounted, instead of at event listener, we're gonna use removeEventListener with the same keydown event. And we're gonna remove this closeOnEscape method. And we should not forget to import these two methods from the fuel library. So import, unmounted, and onUnmounted from fuel. Let's hit save. And then the nice thing about this

unmounted from fuel. Let's hit save. And then the nice thing about this key down event is that we can actually listen for a specific key. So we can check if event.key is escape or not. And if it's not escape, really we really don't want to do anything. So we're gonna return early. But if it is escape, we want to call this close method. So again, we are gonna emit this event.

But if it is escape, we want to call this close method. So again, we are gonna emit this event to the parent component. Let's see if it works. Gonna hit save, go into the browser and see if it works. Open a model, press escape. And sure enough, the model is gone. So this is great, but I want to add one additional check. If the model is opened and you're focused on an input element.

If the model is opened and you're focused on an input element or a select dropdown, then you probably don't want to close the model. 'cause it can be annoying if you're typing numbers and you're pressing escape by accident that the model closes and all your data's gone. And especially in a select dropdown, you will notice this. So let's go back into the editor and we are going to grab the focused element.

So let's go back into the editor and we are going to grab the focusedElementName. So let's uh, call this one focusedElementName and we're going to grab it from the event. So event.target.nodeName. And then we kinda introduce an array of names that we want to ignore. So the first one is input and maybe also select. And we just want to check if our focusedElementName is,

So the first one is input and maybe also select. And we just want to check if our focused element name is, uh, one of these elements in the array. So if this includes our focus element name, then we don't want to do anything. Let's hit safe, go back, edit a model, let's focus on an input element and press escape. And sure enough, it doesn't work anymore. Let's unfocus hit escape and then it works. So that's great. Now, one less thing,

Let's unfocus hit escape and then it works. So that's great. Now, one less thing, how we can improve this. Everything we do in this closeOnEscape method, checking the escape key, checking the focused element, and eventually closing the model. It all doesn't make sense if the model is not shown at all. So what I wanna do is assign this model object and check in here before we do anything else, if the model is shown at all.

and check in here before we do anything else, if the model is shown at all. So if it's not, then we also gonna return early. Just the minor optimization. That might prevent us from some side effects in the future.