1 00:00:01,710 --> 00:00:05,940 Now that we've seen how we can set up a manual event listener, we need to figure out how to make use 2 00:00:05,940 --> 00:00:09,150 of this inside of our code, the back inside of our editor. 3 00:00:09,420 --> 00:00:10,930 I'm going to find my dropdown component. 4 00:00:11,420 --> 00:00:16,800 You might recall that the last widget that we worked on, we covered the use effect hook so we can set 5 00:00:16,800 --> 00:00:17,610 up a use effect. 6 00:00:17,610 --> 00:00:23,160 Hoak inside of dropdown and inside there, whenever our component is first rendered onto the screen, 7 00:00:23,400 --> 00:00:27,240 we could set up an event listener to just, well, listen to that body element. 8 00:00:28,440 --> 00:00:33,570 So let's try this out at the very top next to you, states all add in a U.S. effect. 9 00:00:34,960 --> 00:00:39,040 Then after hour, you state right there, I'm going to call this effect. 10 00:00:41,240 --> 00:00:46,670 And I want to make sure that this area function right here only runs one time when we first render our 11 00:00:46,670 --> 00:00:47,880 component onto the screen. 12 00:00:48,470 --> 00:00:52,520 I only want to run it one time because I only need to set up the event listener one time. 13 00:00:53,550 --> 00:00:58,620 So to make sure this thing only runs once, we will put in a argument or the second element right there 14 00:00:59,370 --> 00:01:00,200 of an empty array. 15 00:01:01,260 --> 00:01:08,340 And then inside there, we can right in our event listener, so we will do a documentary body add event 16 00:01:08,340 --> 00:01:08,880 listener. 17 00:01:10,270 --> 00:01:11,410 We will watch very klick. 18 00:01:12,550 --> 00:01:15,820 And then right now, we'll just do the same thing, a council log of. 19 00:01:18,490 --> 00:01:20,440 I'll then save this look back over. 20 00:01:22,260 --> 00:01:24,970 And now whenever we click anything, we'll see that council log appear. 21 00:01:25,290 --> 00:01:28,350 There's one I can open the dropdown, select an item. 22 00:01:28,500 --> 00:01:30,150 In every case, I get a council log. 23 00:01:31,760 --> 00:01:33,190 OK, well, that definitely looks good. 24 00:01:34,300 --> 00:01:38,780 So now we should be able to replace that slug with some logic to just close the dropdown. 25 00:01:39,280 --> 00:01:42,190 Now, I just want you to know that our initial solution here is not going to work out. 26 00:01:42,370 --> 00:01:45,580 We're going to have to apply a little bit of knowledge around effect. 27 00:01:45,790 --> 00:01:48,220 But let's just try just try something right. 28 00:01:48,220 --> 00:01:49,460 Let's just get started somewhere. 29 00:01:50,110 --> 00:01:54,730 So as we've discussed, we want to make sure that whenever a user clicks anywhere on our document, 30 00:01:55,000 --> 00:01:56,500 we try to close the dropdown. 31 00:01:56,500 --> 00:02:00,060 And that would imply that we want to set open to false input. 32 00:02:00,130 --> 00:02:02,050 Set openside appear to false. 33 00:02:03,730 --> 00:02:04,870 OK, so let's look back over. 34 00:02:05,900 --> 00:02:08,000 I'll then go ahead and open the drop down. 35 00:02:08,360 --> 00:02:11,420 OK, that looks good, and then I will click outside of it. 36 00:02:11,780 --> 00:02:12,900 Hey, it closed, right? 37 00:02:13,460 --> 00:02:14,810 Well, not quite. 38 00:02:14,810 --> 00:02:15,800 We're not there yet. 39 00:02:16,130 --> 00:02:16,960 Take a look at this. 40 00:02:17,660 --> 00:02:23,600 If I click on that thing and then click on an option, notice how the dropdown now stays open. 41 00:02:24,020 --> 00:02:28,730 Ideally, whenever we click on an option, we want the whole thing to close, as it did just a little 42 00:02:28,730 --> 00:02:31,730 bit ago before we just added in this additional event listener. 43 00:02:32,450 --> 00:02:37,010 So it's clear that this thing kind of works as a solution, but also kind of doesn't work. 44 00:02:37,730 --> 00:02:38,990 So why is this occurring? 45 00:02:39,560 --> 00:02:43,970 Well, yet again, quick pause, then take a look at a couple of diagrams and understand why this little 46 00:02:43,970 --> 00:02:47,060 quick fix right here didn't quite work the way we expected.