Now that we understand the issue around clicking on an individual option here, we're going to take
a look at a diagram or two and understand how to fix this.
OK.
So to fix this up, we need to first understand that there are really two scenarios that we need to
worry about.
So in scenario number one, we can imagine what should happen whenever a user clicks on an element that
has been created by our dropdown component.
So if a user ever clicks on any of the elements inside of here, irrespective of event bubbling or event
listeners or any of that stuff.
If a user ever clicks on anything created by the dropdown, then we probably do not want any code.
We wrote inside that body event listener to try to open or closed the dropdown.
So in other words, if I click inside of here, I don't want the body, even listener, to do anything
at all.
On the other hand, if I click outside the dropdown anywhere outside, then I definitely want the body
event listener to attempt to close the dropdown.
That's really the two scenarios.
Now, we are not going to try to interfere with this event object itself.
Whenever a user clicks on an element, we are going to allow that event to propagate around our entire
DOM structure.
It is technically possible to cancel event bubbling, but usually that is bad practice because it can
very easily break other aspects of your code.
So we are not going to try to stop the event or stop the event listener from running at all.
Instead, inside of that event listener, what we really want to do is put in some code to decide whether
or not to attempt to close the dropdown based upon what element was clicked.
Was the element that was clicked outside of the dropdown or was it inside the dropdown?
If it was inside the dropdown, we don't want the body event listener to do anything.
And if the click was outside of it, we want the body eventless nerd to attempt to close the dropdown.
That's the real goal of our solution here.
We need to figure out what element was clicked and whether or not that element was inside of our dropdown.
All right, so now we understand, hopefully some idea of how we're going to solve this, how are we
going to somehow figure out what element was clicked and how we're going to figure out whether or not
that element is inside of our dropdown?
Well, we can figure out what element was clicked very easily to do so.
We'll go back over to our Ed.
We'll go to our body event listener.
I'm gonna receive the event object that always comes along with every event listener.
And then inside of here, we'll do a council log of event dot target like so that is going to be a reference
to a DOM element, specifically the specific element that was clicked on.
We'll save that put back over.
And now whenever I click on anything inside my application, I'll see a council log of the element I
clicked on.
So I clicked on the body.
Now I clicked on the dropdown.
Now I clicked on an item and now I'll click on a label.
So very easy for us to figure out whether or not force me to figure out which element we actually clicked
on.
But now we need to figure out whether or not that was an element that was rendered or created by our
dropdown component.
So for that part.
Well, here's what we're gonna do.
We're going to make use of another hook in the world of react.
The hope that we're going to use is called use RF.
Use RF is very similar to that react dot, create RF that we took a look at.
A little bit ago inside the course use RF allows us to get a reference to a direct DOM element.
We're going to make use of use RF to get a reference to the most apparent element that has been created
by the dropdown.
That in our case is the div with a class of UI form.
So this one right here.
We're gonna get a reference to that element once we get a reference to that element.
We can take a look at this element and the one that was clicked on and decide whether or not the element
was clicked on is inside of this.
That part is a little bit.
It might sound really hard, but it's actually super easy to do to figure out whether or not one element
is being displayed inside of another.
So that's our ultimate goal.
All we have do is make use of use RF.
We're going to get a reference to our top level element inside the dropdown and then use that to decide
whether or not the element that was clicked on is inside or contained inside of the div with class name
UI form.
Yes.
So let's make use of use ref in the next video.