1 00:00:01,950 --> 00:00:06,360 We've now gone through three videos around all this dropdown closing stuff, and here's what we've really 2 00:00:06,360 --> 00:00:09,690 determined so far, and I didn't really put this on here in order, but whatever. 3 00:00:10,500 --> 00:00:15,270 So what we've released, Stablish, is that the dropdown component needs to detect a click event on 4 00:00:15,420 --> 00:00:20,430 any element inside of our document besides an element that it created. 5 00:00:21,300 --> 00:00:26,610 So if a user clicks anywhere outside the dropdown, the dropdown needs to detect that. 6 00:00:27,480 --> 00:00:28,140 Let's step one. 7 00:00:28,920 --> 00:00:29,550 Step two. 8 00:00:30,300 --> 00:00:35,490 We kind of established that the dropdown component has a tough time setting up event handlers on elements 9 00:00:35,490 --> 00:00:37,080 that it did not itself create. 10 00:00:37,890 --> 00:00:41,730 Remember, we discussed how all this stuff around event handling that we've discussed so far inside 11 00:00:41,730 --> 00:00:46,880 this course has been in the context of creating a J.S. sex element and then setting up an event handler 12 00:00:46,920 --> 00:00:47,430 like so. 13 00:00:48,350 --> 00:00:53,930 It is not impossible for a react component to setup event handlers on other elements, but it is just 14 00:00:53,930 --> 00:00:55,400 a little bit challenging. 15 00:00:57,200 --> 00:00:59,090 The last thing that we established is that. 16 00:00:59,120 --> 00:01:00,860 Well, invent bubbling is a thing. 17 00:01:00,980 --> 00:01:02,960 It exists if we click on some element. 18 00:01:03,170 --> 00:01:05,480 That event is going to bubble up our domme structure. 19 00:01:06,350 --> 00:01:09,920 So with these three points in mind, we can now start to look at a solution. 20 00:01:10,910 --> 00:01:14,390 So here's what we're going to do to solve these three issues or not. 21 00:01:14,570 --> 00:01:15,680 They're not really all issues. 22 00:01:16,040 --> 00:01:18,560 Here's a solution that kind of incorporates these three ideas. 23 00:01:18,590 --> 00:01:19,250 That's what we'll say. 24 00:01:20,450 --> 00:01:26,420 So our solution is going to be to have our dropdown components setup a manual event listener, and I'll 25 00:01:26,420 --> 00:01:28,550 show you what I mean by manual event listener. 26 00:01:29,700 --> 00:01:33,190 In just a moment, we're going to set up that listener on the body element. 27 00:01:34,060 --> 00:01:38,940 Then anytime that someone clicks on any element inside of our entire document, that event is going 28 00:01:38,940 --> 00:01:41,220 to bubble up to the body element. 29 00:01:41,750 --> 00:01:45,240 And that will thus tell the dropdown that something has been clicked. 30 00:01:46,230 --> 00:01:49,260 Let me show you first what I mean by a manual event listener. 31 00:01:50,540 --> 00:01:54,470 So, again, for the third or fourth time, we've been taking a look at setting up events inside this 32 00:01:54,470 --> 00:01:57,320 course by assigning some props to a J a sex element. 33 00:01:57,860 --> 00:02:03,020 Well, we can still make use of native browser events and event listeners as much as we please from 34 00:02:03,080 --> 00:02:03,860 our reac code. 35 00:02:04,670 --> 00:02:10,670 I wanted to set up a event listener on the body element without using react or anything like that. 36 00:02:10,850 --> 00:02:12,500 Here's what you would write inside of our console. 37 00:02:12,710 --> 00:02:14,510 We could write out document. 38 00:02:15,970 --> 00:02:20,120 Dogsbody add event listener, the first argument. 39 00:02:20,150 --> 00:02:24,980 This is going to be the type of event we want to listen for, which is a click, and then the second 40 00:02:24,980 --> 00:02:27,560 argument will be a function to run. 41 00:02:27,700 --> 00:02:32,690 Anytime that event occurs right now, I'm going to a council log of click. 42 00:02:35,640 --> 00:02:36,340 So there's a whole line. 43 00:02:36,360 --> 00:02:38,010 Let me just zoom in so you can read that very easily. 44 00:02:39,910 --> 00:02:43,480 So I'm going to run that and I have now set up an event listener on the body element. 45 00:02:44,140 --> 00:02:48,910 Now, if I click on any element on the entire screen, the event is going to bubble up, eventually 46 00:02:48,910 --> 00:02:51,610 get to the body and we should see a console log of click. 47 00:02:52,510 --> 00:02:54,600 Going to click on the big white space down here first. 48 00:02:55,050 --> 00:02:55,140 Yep. 49 00:02:55,180 --> 00:02:55,660 There we go. 50 00:02:56,560 --> 00:02:58,090 Well, then click on one of these options. 51 00:02:58,590 --> 00:02:58,740 Yep. 52 00:02:58,990 --> 00:02:59,440 There we go. 53 00:03:00,510 --> 00:03:01,800 All open the drop down, back up. 54 00:03:02,340 --> 00:03:02,910 Yep, there we go. 55 00:03:02,940 --> 00:03:03,660 Just went to four. 56 00:03:03,960 --> 00:03:05,580 I can even click on the label right here. 57 00:03:05,950 --> 00:03:07,140 Yep, it just went to five. 58 00:03:07,890 --> 00:03:12,210 Without a doubt, we can setup a manual event listener any time we click anywhere. 59 00:03:12,480 --> 00:03:13,820 The event bubbles up. 60 00:03:15,730 --> 00:03:15,880 Get. 61 00:03:16,110 --> 00:03:19,410 So that's how we are going to listen for clicks and it's how we're going to make sure that we detect 62 00:03:19,440 --> 00:03:21,070 a click anywhere on the screen. 63 00:03:21,840 --> 00:03:27,030 Now, what we really need to do is just figure out how we can get the drop down component to set up 64 00:03:27,180 --> 00:03:27,690 that event. 65 00:03:27,690 --> 00:03:28,080 Listener. 66 00:03:28,200 --> 00:03:29,550 That's the next big question. 67 00:03:30,190 --> 00:03:31,620 Let's take care of that in the next video.