We can open up our dropdown and select an item, but the drop down stays open and it's only when we
click outside of it now that the dropdown actually closes.
So in this video, we're going to figure out why that is.
I first won't get started by going back over to our editor, and we are going to find the three different
click event listeners that we have wired up inside of this component.
The first one is right here, the document dump body that we just set up a moment ago.
We've then got a click event listener on each individual item.
And we've got one more on the dropdown itself.
We're going to go round to all three these difference on click event listeners and add in a console
log to each one.
What I really want to do here is figure out the order in which each of these click event listeners are
invoked.
OK.
So let's start off with the event listener that we just wired up a moment ago.
The inside of you're going to put in a console log and say body click.
And then going to go down to where our list is built up.
I'm going to expand this arrow function and put in some really Brace's around the body and I'll put
in a console log of item clicked.
And then finally on the last one right here, I'll expand this with curly braces as well.
And put in a console log of dropdown clicked.
Now, before testing this out, I want to show you a very quick diagram.
So inside this diagram, I have our general HMO structure and I'm reflecting the different event listeners
that we are showing or that we have wired up.
So if we really think about event bubbling, you would probably guess this is what I'm thinking.
You would probably guess that first this event listener gets invoked.
And then that one.
Lets go and run Arko.
Now we're going to try to click on an individual item and then take a look at the console logs we get
and see whether or not that is the order in which these are actually invoked.
All right, and clear my console.
I'm going to open the drop down cleared again, and then I'm going to click on one of these items.
Here we go.
Click.
Take a look at the order in which those event listeners actually get invoked, it is first the body,
then the item, then the dropdown.
Let's go and kind of reconcile that on this diagram.
So what you might have thought is that first this event listener gets called, then that one and that,
then that one, because that kind of makes sense with the idea of an event bubbling up.
Right?
Well, unfortunately, that is not quite what happens.
Remember, these purple boxes represent even handlers that have been wired up through react.
And the green one is one that was wired up with a manual event listener.
Unfortunately, whenever we think about the order in which event listeners are invoked, all the event
listeners that were wired up using add event listener actually get called first.
After all of those are called then and only then do all of our react event listeners get called.
And it's always from the most child element up to the most parent.
That means that this is actually the first event listener that gets called that is the only event listener
that has been wired up using add even.
Listener, remember that method we just used?
So after that one gets called, then all the different react event listeners get called when the most
child to the most parent.
That means that this one is next.
And then number three.
And again, you can very easily verify that by looking at the order of these council logs.
OK.
So why is that relevant?
Well, let's think about what really is going on in each of these event listeners now that we know that
the body event listener is always gonna be the first to be invoked.
So back over here.
Here's our body event listener.
So inside there, the first thing that happens whenever we click on an item is we set open to false.
Which in theory closes our dropdown.
Then the next thing that happens is the click on the individual item.
So that is this event listener right here.
So we update our currently selected option that doesn't have anything to do with opening or closing
the dropdown.
And then finally, the last thing that actually gets invoked is the on Click listener to the dropdown
itself.
And so that's down here.
So what do we do there?
This is the last thing we do?
Well, we take whatever the current value of open is and flip it to its opposite.
Well, that means that we'd take that false value and we flip it back over to true, which results in
the dropdown staying open.
In theory, the dropdown does close for a fraction the second, but then it immediately opens back up.
When this event listener gets invoked.
So that is why the drop down appears to always be open whenever we click on an item.
All right.
So we are going to fix this up in just a moment.
But first, I'm going to undo all those council logs.
I'm going to undo very quickly.
There's one.
There is another.
And there's the last one.
There we go.
I just took out all those council logs.
I want to see this file.
I'll take a look at a solution to this in just a moment.