1
00:00:01,410 --> 00:00:06,570
We can open up our dropdown and select an item, but the drop down stays open and it's only when we

2
00:00:06,570 --> 00:00:09,600
click outside of it now that the dropdown actually closes.

3
00:00:10,110 --> 00:00:12,200
So in this video, we're going to figure out why that is.

4
00:00:13,040 --> 00:00:18,270
I first won't get started by going back over to our editor, and we are going to find the three different

5
00:00:18,300 --> 00:00:22,170
click event listeners that we have wired up inside of this component.

6
00:00:22,890 --> 00:00:26,490
The first one is right here, the document dump body that we just set up a moment ago.

7
00:00:27,240 --> 00:00:30,600
We've then got a click event listener on each individual item.

8
00:00:31,440 --> 00:00:33,540
And we've got one more on the dropdown itself.

9
00:00:34,510 --> 00:00:38,920
We're going to go round to all three these difference on click event listeners and add in a console

10
00:00:38,920 --> 00:00:40,060
log to each one.

11
00:00:40,720 --> 00:00:45,790
What I really want to do here is figure out the order in which each of these click event listeners are

12
00:00:45,790 --> 00:00:46,360
invoked.

13
00:00:47,230 --> 00:00:47,410
OK.

14
00:00:47,470 --> 00:00:50,620
So let's start off with the event listener that we just wired up a moment ago.

15
00:00:51,450 --> 00:00:55,780
The inside of you're going to put in a console log and say body click.

16
00:00:58,250 --> 00:01:00,710
And then going to go down to where our list is built up.

17
00:01:01,520 --> 00:01:07,040
I'm going to expand this arrow function and put in some really Brace's around the body and I'll put

18
00:01:07,040 --> 00:01:09,500
in a console log of item clicked.

19
00:01:12,730 --> 00:01:18,250
And then finally on the last one right here, I'll expand this with curly braces as well.

20
00:01:19,120 --> 00:01:22,840
And put in a console log of dropdown clicked.

21
00:01:25,600 --> 00:01:28,340
Now, before testing this out, I want to show you a very quick diagram.

22
00:01:29,140 --> 00:01:35,600
So inside this diagram, I have our general HMO structure and I'm reflecting the different event listeners

23
00:01:35,600 --> 00:01:37,220
that we are showing or that we have wired up.

24
00:01:37,910 --> 00:01:42,860
So if we really think about event bubbling, you would probably guess this is what I'm thinking.

25
00:01:42,860 --> 00:01:47,210
You would probably guess that first this event listener gets invoked.

26
00:01:47,390 --> 00:01:48,170
And then that one.

27
00:01:48,260 --> 00:01:49,400
And then that one.

28
00:01:50,050 --> 00:01:51,100
Lets go and run Arko.

29
00:01:51,170 --> 00:01:55,220
Now we're going to try to click on an individual item and then take a look at the console logs we get

30
00:01:55,490 --> 00:01:59,060
and see whether or not that is the order in which these are actually invoked.

31
00:02:00,220 --> 00:02:01,480
All right, and clear my console.

32
00:02:02,750 --> 00:02:06,830
I'm going to open the drop down cleared again, and then I'm going to click on one of these items.

33
00:02:07,250 --> 00:02:07,640
Here we go.

34
00:02:07,850 --> 00:02:08,180
Click.

35
00:02:09,380 --> 00:02:15,800
Take a look at the order in which those event listeners actually get invoked, it is first the body,

36
00:02:16,220 --> 00:02:18,170
then the item, then the dropdown.

37
00:02:19,320 --> 00:02:21,480
Let's go and kind of reconcile that on this diagram.

38
00:02:21,940 --> 00:02:27,090
So what you might have thought is that first this event listener gets called, then that one and that,

39
00:02:27,150 --> 00:02:31,380
then that one, because that kind of makes sense with the idea of an event bubbling up.

40
00:02:31,440 --> 00:02:31,760
Right?

41
00:02:32,340 --> 00:02:35,370
Well, unfortunately, that is not quite what happens.

42
00:02:36,090 --> 00:02:40,950
Remember, these purple boxes represent even handlers that have been wired up through react.

43
00:02:41,310 --> 00:02:44,310
And the green one is one that was wired up with a manual event listener.

44
00:02:45,000 --> 00:02:50,490
Unfortunately, whenever we think about the order in which event listeners are invoked, all the event

45
00:02:50,490 --> 00:02:55,770
listeners that were wired up using add event listener actually get called first.

46
00:02:57,570 --> 00:03:03,480
After all of those are called then and only then do all of our react event listeners get called.

47
00:03:03,930 --> 00:03:07,950
And it's always from the most child element up to the most parent.

48
00:03:08,910 --> 00:03:15,090
That means that this is actually the first event listener that gets called that is the only event listener

49
00:03:15,090 --> 00:03:16,680
that has been wired up using add even.

50
00:03:16,800 --> 00:03:18,570
Listener, remember that method we just used?

51
00:03:19,230 --> 00:03:23,940
So after that one gets called, then all the different react event listeners get called when the most

52
00:03:23,940 --> 00:03:25,290
child to the most parent.

53
00:03:25,890 --> 00:03:27,810
That means that this one is next.

54
00:03:28,260 --> 00:03:30,000
And then number three.

55
00:03:31,050 --> 00:03:35,370
And again, you can very easily verify that by looking at the order of these council logs.

56
00:03:37,120 --> 00:03:37,280
OK.

57
00:03:37,380 --> 00:03:38,430
So why is that relevant?

58
00:03:38,850 --> 00:03:43,770
Well, let's think about what really is going on in each of these event listeners now that we know that

59
00:03:43,770 --> 00:03:46,740
the body event listener is always gonna be the first to be invoked.

60
00:03:48,140 --> 00:03:48,910
So back over here.

61
00:03:49,650 --> 00:03:50,980
Here's our body event listener.

62
00:03:51,430 --> 00:03:56,740
So inside there, the first thing that happens whenever we click on an item is we set open to false.

63
00:03:57,280 --> 00:03:58,950
Which in theory closes our dropdown.

64
00:04:01,010 --> 00:04:04,070
Then the next thing that happens is the click on the individual item.

65
00:04:04,900 --> 00:04:06,740
So that is this event listener right here.

66
00:04:07,010 --> 00:04:12,110
So we update our currently selected option that doesn't have anything to do with opening or closing

67
00:04:12,110 --> 00:04:12,670
the dropdown.

68
00:04:13,150 --> 00:04:17,870
And then finally, the last thing that actually gets invoked is the on Click listener to the dropdown

69
00:04:17,870 --> 00:04:18,290
itself.

70
00:04:18,860 --> 00:04:19,940
And so that's down here.

71
00:04:21,150 --> 00:04:22,240
So what do we do there?

72
00:04:22,330 --> 00:04:23,890
This is the last thing we do?

73
00:04:24,250 --> 00:04:28,360
Well, we take whatever the current value of open is and flip it to its opposite.

74
00:04:29,410 --> 00:04:34,420
Well, that means that we'd take that false value and we flip it back over to true, which results in

75
00:04:34,420 --> 00:04:36,220
the dropdown staying open.

76
00:04:36,760 --> 00:04:41,520
In theory, the dropdown does close for a fraction the second, but then it immediately opens back up.

77
00:04:41,770 --> 00:04:43,660
When this event listener gets invoked.

78
00:04:44,060 --> 00:04:49,660
So that is why the drop down appears to always be open whenever we click on an item.

79
00:04:50,770 --> 00:04:51,040
All right.

80
00:04:51,070 --> 00:04:52,630
So we are going to fix this up in just a moment.

81
00:04:52,720 --> 00:04:54,970
But first, I'm going to undo all those council logs.

82
00:04:55,510 --> 00:04:56,830
I'm going to undo very quickly.

83
00:04:58,370 --> 00:04:59,030
There's one.

84
00:05:00,150 --> 00:05:00,870
There is another.

85
00:05:02,420 --> 00:05:04,070
And there's the last one.

86
00:05:04,520 --> 00:05:04,850
There we go.

87
00:05:05,510 --> 00:05:06,980
I just took out all those council logs.

88
00:05:07,020 --> 00:05:07,850
I want to see this file.

89
00:05:08,130 --> 00:05:10,700
I'll take a look at a solution to this in just a moment.