We've now gone through three videos around all this dropdown closing stuff, and here's what we've really
determined so far, and I didn't really put this on here in order, but whatever.
So what we've released, Stablish, is that the dropdown component needs to detect a click event on
any element inside of our document besides an element that it created.
So if a user clicks anywhere outside the dropdown, the dropdown needs to detect that.
Let's step one.
Step two.
We kind of established that the dropdown component has a tough time setting up event handlers on elements
that it did not itself create.
Remember, we discussed how all this stuff around event handling that we've discussed so far inside
this course has been in the context of creating a J.S. sex element and then setting up an event handler
like so.
It is not impossible for a react component to setup event handlers on other elements, but it is just
a little bit challenging.
The last thing that we established is that.
Well, invent bubbling is a thing.
It exists if we click on some element.
That event is going to bubble up our domme structure.
So with these three points in mind, we can now start to look at a solution.
So here's what we're going to do to solve these three issues or not.
They're not really all issues.
Here's a solution that kind of incorporates these three ideas.
That's what we'll say.
So our solution is going to be to have our dropdown components setup a manual event listener, and I'll
show you what I mean by manual event listener.
In just a moment, we're going to set up that listener on the body element.
Then anytime that someone clicks on any element inside of our entire document, that event is going
to bubble up to the body element.
And that will thus tell the dropdown that something has been clicked.
Let me show you first what I mean by a manual event listener.
So, again, for the third or fourth time, we've been taking a look at setting up events inside this
course by assigning some props to a J a sex element.
Well, we can still make use of native browser events and event listeners as much as we please from
our reac code.
I wanted to set up a event listener on the body element without using react or anything like that.
Here's what you would write inside of our console.
We could write out document.
Dogsbody add event listener, the first argument.
This is going to be the type of event we want to listen for, which is a click, and then the second
argument will be a function to run.
Anytime that event occurs right now, I'm going to a council log of click.
So there's a whole line.
Let me just zoom in so you can read that very easily.
So I'm going to run that and I have now set up an event listener on the body element.
Now, if I click on any element on the entire screen, the event is going to bubble up, eventually
get to the body and we should see a console log of click.
Going to click on the big white space down here first.
Yep.
There we go.
Well, then click on one of these options.
Yep.
There we go.
All open the drop down, back up.
Yep, there we go.
Just went to four.
I can even click on the label right here.
Yep, it just went to five.
Without a doubt, we can setup a manual event listener any time we click anywhere.
The event bubbles up.
Get.
So that's how we are going to listen for clicks and it's how we're going to make sure that we detect
a click anywhere on the screen.
Now, what we really need to do is just figure out how we can get the drop down component to set up
that event.
Listener.
That's the next big question.
Let's take care of that in the next video.