1 00:00:01,520 --> 00:00:05,090 Now that we understand the issue around clicking on an individual option here, we're going to take 2 00:00:05,090 --> 00:00:07,850 a look at a diagram or two and understand how to fix this. 3 00:00:08,740 --> 00:00:09,040 OK. 4 00:00:09,320 --> 00:00:14,000 So to fix this up, we need to first understand that there are really two scenarios that we need to 5 00:00:14,000 --> 00:00:14,540 worry about. 6 00:00:15,080 --> 00:00:20,570 So in scenario number one, we can imagine what should happen whenever a user clicks on an element that 7 00:00:20,570 --> 00:00:23,150 has been created by our dropdown component. 8 00:00:24,110 --> 00:00:30,260 So if a user ever clicks on any of the elements inside of here, irrespective of event bubbling or event 9 00:00:30,260 --> 00:00:31,880 listeners or any of that stuff. 10 00:00:32,150 --> 00:00:38,180 If a user ever clicks on anything created by the dropdown, then we probably do not want any code. 11 00:00:38,180 --> 00:00:42,170 We wrote inside that body event listener to try to open or closed the dropdown. 12 00:00:42,620 --> 00:00:47,900 So in other words, if I click inside of here, I don't want the body, even listener, to do anything 13 00:00:47,990 --> 00:00:48,410 at all. 14 00:00:50,550 --> 00:00:56,490 On the other hand, if I click outside the dropdown anywhere outside, then I definitely want the body 15 00:00:56,520 --> 00:00:58,950 event listener to attempt to close the dropdown. 16 00:00:59,640 --> 00:01:01,140 That's really the two scenarios. 17 00:01:01,810 --> 00:01:05,100 Now, we are not going to try to interfere with this event object itself. 18 00:01:05,430 --> 00:01:10,230 Whenever a user clicks on an element, we are going to allow that event to propagate around our entire 19 00:01:10,230 --> 00:01:10,980 DOM structure. 20 00:01:11,460 --> 00:01:16,590 It is technically possible to cancel event bubbling, but usually that is bad practice because it can 21 00:01:16,590 --> 00:01:18,840 very easily break other aspects of your code. 22 00:01:19,440 --> 00:01:23,820 So we are not going to try to stop the event or stop the event listener from running at all. 23 00:01:24,210 --> 00:01:30,360 Instead, inside of that event listener, what we really want to do is put in some code to decide whether 24 00:01:30,360 --> 00:01:35,400 or not to attempt to close the dropdown based upon what element was clicked. 25 00:01:35,940 --> 00:01:40,830 Was the element that was clicked outside of the dropdown or was it inside the dropdown? 26 00:01:41,490 --> 00:01:45,360 If it was inside the dropdown, we don't want the body event listener to do anything. 27 00:01:46,550 --> 00:01:51,210 And if the click was outside of it, we want the body eventless nerd to attempt to close the dropdown. 28 00:01:51,970 --> 00:01:54,430 That's the real goal of our solution here. 29 00:01:54,880 --> 00:02:00,160 We need to figure out what element was clicked and whether or not that element was inside of our dropdown. 30 00:02:01,410 --> 00:02:06,270 All right, so now we understand, hopefully some idea of how we're going to solve this, how are we 31 00:02:06,270 --> 00:02:10,740 going to somehow figure out what element was clicked and how we're going to figure out whether or not 32 00:02:10,740 --> 00:02:12,870 that element is inside of our dropdown? 33 00:02:13,650 --> 00:02:17,310 Well, we can figure out what element was clicked very easily to do so. 34 00:02:17,610 --> 00:02:18,810 We'll go back over to our Ed. 35 00:02:19,790 --> 00:02:21,500 We'll go to our body event listener. 36 00:02:22,310 --> 00:02:26,120 I'm gonna receive the event object that always comes along with every event listener. 37 00:02:27,870 --> 00:02:34,050 And then inside of here, we'll do a council log of event dot target like so that is going to be a reference 38 00:02:34,050 --> 00:02:38,160 to a DOM element, specifically the specific element that was clicked on. 39 00:02:39,910 --> 00:02:41,220 We'll save that put back over. 40 00:02:42,350 --> 00:02:46,580 And now whenever I click on anything inside my application, I'll see a council log of the element I 41 00:02:46,580 --> 00:02:47,030 clicked on. 42 00:02:47,600 --> 00:02:48,620 So I clicked on the body. 43 00:02:48,860 --> 00:02:50,120 Now I clicked on the dropdown. 44 00:02:50,360 --> 00:02:53,390 Now I clicked on an item and now I'll click on a label. 45 00:02:54,110 --> 00:02:59,210 So very easy for us to figure out whether or not force me to figure out which element we actually clicked 46 00:02:59,210 --> 00:02:59,450 on. 47 00:02:59,630 --> 00:03:04,190 But now we need to figure out whether or not that was an element that was rendered or created by our 48 00:03:04,190 --> 00:03:05,240 dropdown component. 49 00:03:05,990 --> 00:03:06,800 So for that part. 50 00:03:07,040 --> 00:03:08,480 Well, here's what we're gonna do. 51 00:03:09,170 --> 00:03:12,140 We're going to make use of another hook in the world of react. 52 00:03:12,780 --> 00:03:15,440 The hope that we're going to use is called use RF. 53 00:03:16,590 --> 00:03:20,730 Use RF is very similar to that react dot, create RF that we took a look at. 54 00:03:20,750 --> 00:03:26,830 A little bit ago inside the course use RF allows us to get a reference to a direct DOM element. 55 00:03:27,620 --> 00:03:33,110 We're going to make use of use RF to get a reference to the most apparent element that has been created 56 00:03:33,110 --> 00:03:33,890 by the dropdown. 57 00:03:34,610 --> 00:03:37,850 That in our case is the div with a class of UI form. 58 00:03:39,570 --> 00:03:40,800 So this one right here. 59 00:03:41,460 --> 00:03:45,210 We're gonna get a reference to that element once we get a reference to that element. 60 00:03:45,300 --> 00:03:50,590 We can take a look at this element and the one that was clicked on and decide whether or not the element 61 00:03:50,610 --> 00:03:52,680 was clicked on is inside of this. 62 00:03:53,520 --> 00:03:54,360 That part is a little bit. 63 00:03:54,840 --> 00:03:59,250 It might sound really hard, but it's actually super easy to do to figure out whether or not one element 64 00:03:59,280 --> 00:04:00,690 is being displayed inside of another. 65 00:04:01,540 --> 00:04:02,610 So that's our ultimate goal. 66 00:04:02,910 --> 00:04:04,370 All we have do is make use of use RF. 67 00:04:04,800 --> 00:04:09,300 We're going to get a reference to our top level element inside the dropdown and then use that to decide 68 00:04:09,300 --> 00:04:15,390 whether or not the element that was clicked on is inside or contained inside of the div with class name 69 00:04:15,480 --> 00:04:16,110 UI form. 70 00:04:17,210 --> 00:04:17,320 Yes. 71 00:04:17,570 --> 00:04:20,210 So let's make use of use ref in the next video.