1
00:00:01,140 --> 00:00:02,790
‫So let's not do the same thing

2
00:00:02,790 --> 00:00:04,170
‫that we did before

3
00:00:04,170 --> 00:00:08,340
‫which was to automatically focus on the input element

4
00:00:08,340 --> 00:00:10,683
‫but this time using a ref.

5
00:00:12,330 --> 00:00:13,170
‫And so let's start

6
00:00:13,170 --> 00:00:17,460
‫by getting rid of this way of doing things.

7
00:00:17,460 --> 00:00:21,180
‫And so again, let's now use a ref instead.

8
00:00:21,180 --> 00:00:26,180
‫So using a ref with a DOM element happens in three steps.

9
00:00:26,610 --> 00:00:29,700
‫First of all, we create the ref.

10
00:00:29,700 --> 00:00:32,940
‫And so for that we use the useRef hook

11
00:00:32,940 --> 00:00:35,100
‫as we just learned before.

12
00:00:35,100 --> 00:00:36,773
‫So we just write useRef

13
00:00:38,820 --> 00:00:41,010
‫and then we need to again make sure

14
00:00:41,010 --> 00:00:44,463
‫that it is now correctly imported from React.

15
00:00:46,410 --> 00:00:48,993
‫Okay, so let's go back.

16
00:00:49,980 --> 00:00:52,410
‫So we call the useRef hook

17
00:00:52,410 --> 00:00:55,140
‫and then here we pass in the initial value

18
00:00:55,140 --> 00:00:57,870
‫that we want to be in that current property

19
00:00:57,870 --> 00:00:59,700
‫that we just talked about.

20
00:00:59,700 --> 00:01:00,750
‫Now in this case,

21
00:01:00,750 --> 00:01:02,820
‫when we work with a DOM element

22
00:01:02,820 --> 00:01:04,743
‫that is usually just null.

23
00:01:05,790 --> 00:01:06,630
‫Now all right.

24
00:01:06,630 --> 00:01:08,820
‫And so this will simply return a ref

25
00:01:08,820 --> 00:01:11,490
‫that we can give any name to.

26
00:01:11,490 --> 00:01:12,720
‫And so let's now store this

27
00:01:12,720 --> 00:01:15,490
‫into a variable called inputElement

28
00:01:17,435 --> 00:01:21,213
‫because that's what we will want to store inside this ref.

29
00:01:22,350 --> 00:01:23,790
‫So we have our ref.

30
00:01:23,790 --> 00:01:25,680
‫And now as a second step,

31
00:01:25,680 --> 00:01:29,490
‫let's actually come to the element that we want to select.

32
00:01:29,490 --> 00:01:33,330
‫And so all we have to do is to use the ref prop

33
00:01:33,330 --> 00:01:37,380
‫and then we just pass in the ref that we just created,

34
00:01:37,380 --> 00:01:39,150
‫so that's inputEl.

35
00:01:39,150 --> 00:01:42,390
‫And so now these two are basically connected

36
00:01:42,390 --> 00:01:44,340
‫in a declarative way.

37
00:01:44,340 --> 00:01:48,960
‫So there's no need to manually do some Query selection

38
00:01:48,960 --> 00:01:50,250
‫like this here.

39
00:01:50,250 --> 00:01:53,250
‫So all we are doing is to tell React

40
00:01:53,250 --> 00:01:57,210
‫that the ref that will contain this input element here

41
00:01:57,210 --> 00:02:02,010
‫should be, well, this input element ref that we created.

42
00:02:02,010 --> 00:02:06,300
‫And so now in order to use this ref in the third step,

43
00:02:06,300 --> 00:02:09,263
‫we can use again the useEffect hook.

44
00:02:12,300 --> 00:02:17,300
‫So a new function that simply runs on mount.

45
00:02:17,880 --> 00:02:21,900
‫So we need to use an effect in order to use a ref

46
00:02:21,900 --> 00:02:25,020
‫that contains a DOM element like this one

47
00:02:25,020 --> 00:02:29,220
‫because the ref only gets added to this DOM element here

48
00:02:29,220 --> 00:02:31,560
‫after the DOM has already loaded.

49
00:02:31,560 --> 00:02:35,610
‫And so therefore we can only access it in effect

50
00:02:35,610 --> 00:02:39,390
‫which also runs after the DOM has been loaded.

51
00:02:39,390 --> 00:02:42,330
‫So this is the perfect place for using a ref

52
00:02:42,330 --> 00:02:44,550
‫that contains a DOM element.

53
00:02:44,550 --> 00:02:47,580
‫And so now if we want to do the same thing as before,

54
00:02:47,580 --> 00:02:51,480
‫we just use our input element.

55
00:02:51,480 --> 00:02:55,680
‫And then remember that we need to read the current property

56
00:02:55,680 --> 00:02:58,020
‫which is basically like that box

57
00:02:58,020 --> 00:03:02,643
‫where whatever we store in the ref will get stored.

58
00:03:03,510 --> 00:03:06,270
‫So inputElement.current.

59
00:03:06,270 --> 00:03:10,560
‫And so this here is now really the DOM element itself.

60
00:03:10,560 --> 00:03:15,183
‫And so this is where we can then call the focused method on.

61
00:03:16,050 --> 00:03:18,090
‫And just to show you,

62
00:03:18,090 --> 00:03:21,060
‫we can also lock this to the console of course.

63
00:03:21,060 --> 00:03:25,080
‫So inputElement.current,

64
00:03:25,080 --> 00:03:26,370
‫give it a Save,

65
00:03:26,370 --> 00:03:28,950
‫and let's manually reload here.

66
00:03:28,950 --> 00:03:30,930
‫And so you see that just like before,

67
00:03:30,930 --> 00:03:34,650
‫our input field got automatically focused

68
00:03:34,650 --> 00:03:37,530
‫and also the DOM element itself

69
00:03:37,530 --> 00:03:39,723
‫was rendered here to the console.

70
00:03:43,020 --> 00:03:44,160
‫And so again,

71
00:03:44,160 --> 00:03:47,790
‫this means that we successfully connected the ref

72
00:03:47,790 --> 00:03:51,360
‫that we created here with this DOM element.

73
00:03:51,360 --> 00:03:55,620
‫So simply by passing this ref into the ref prop.

74
00:03:55,620 --> 00:03:59,820
‫And so then in a use effect after the DOM has been loaded,

75
00:03:59,820 --> 00:04:04,820
‫we can use this DOM element inside the ref.current property.

76
00:04:05,580 --> 00:04:08,370
‫All right, but now I actually want to do something

77
00:04:08,370 --> 00:04:10,770
‫a little bit more interesting.

78
00:04:10,770 --> 00:04:12,780
‫So to show you the new feature

79
00:04:12,780 --> 00:04:14,280
‫that we now want to implement,

80
00:04:14,280 --> 00:04:16,203
‫let's come to our demo here.

81
00:04:17,160 --> 00:04:19,980
‫And now when I'm anywhere in the application,

82
00:04:19,980 --> 00:04:22,500
‫I will hit the Enter key.

83
00:04:22,500 --> 00:04:23,700
‫So I just did that

84
00:04:23,700 --> 00:04:28,020
‫and then automatically this input field got focused.

85
00:04:28,020 --> 00:04:29,910
‫And so that's a really nice feature

86
00:04:29,910 --> 00:04:33,780
‫so that we can very easily search for movies.

87
00:04:33,780 --> 00:04:36,900
‫So let's say that I had just searched for this movie

88
00:04:36,900 --> 00:04:39,300
‫then I took a look at this one,

89
00:04:39,300 --> 00:04:40,920
‫and now at a certain point,

90
00:04:40,920 --> 00:04:42,750
‫again, I hit the Return key.

91
00:04:42,750 --> 00:04:43,773
‫So the Enter key.

92
00:04:45,030 --> 00:04:47,910
‫So you see that selected the field

93
00:04:47,910 --> 00:04:51,240
‫and it also removed all the search Query text

94
00:04:51,240 --> 00:04:52,773
‫that was still in there.

95
00:04:54,150 --> 00:04:56,490
‫So let's implement that.

96
00:04:56,490 --> 00:04:57,323
‫And so for that,

97
00:04:57,323 --> 00:04:59,130
‫the first thing that we need to do

98
00:04:59,130 --> 00:05:02,880
‫is to listen for that key press event.

99
00:05:02,880 --> 00:05:06,813
‫And in fact, we already did something similar before.

100
00:05:07,740 --> 00:05:09,570
‫So in the movie detail,

101
00:05:09,570 --> 00:05:13,083
‫we already listened here to the keydown event.

102
00:05:15,090 --> 00:05:15,960
‫Now in this case,

103
00:05:15,960 --> 00:05:20,790
‫we do actually need to manually select here this document

104
00:05:20,790 --> 00:05:23,073
‫and then add an event listener there.

105
00:05:23,910 --> 00:05:26,370
‫So there we cannot use a ref

106
00:05:26,370 --> 00:05:29,583
‫but that's just the way that things work in React.

107
00:05:30,660 --> 00:05:32,430
‫So let's do that.

108
00:05:32,430 --> 00:05:34,473
‫So document.addeEventListener.

109
00:05:36,918 --> 00:05:39,418
‫And then on the keydown event.

110
00:05:40,260 --> 00:05:43,230
‫And here let's actually again,

111
00:05:43,230 --> 00:05:45,330
‫specify a callback function

112
00:05:45,330 --> 00:05:48,580
‫which we will then create here

113
00:05:50,460 --> 00:05:53,130
‫and we need to call it callback

114
00:05:53,130 --> 00:05:56,193
‫and it gets access to the event object.

115
00:05:57,210 --> 00:05:59,430
‫And let's place that here.

116
00:05:59,430 --> 00:06:01,980
‫And so the reason why we placed this

117
00:06:01,980 --> 00:06:03,810
‫in a separate callback function

118
00:06:03,810 --> 00:06:07,710
‫was so that we could clean up after our event.

119
00:06:07,710 --> 00:06:09,390
‫So return,

120
00:06:09,390 --> 00:06:12,270
‫and let's use an arrow function here now,

121
00:06:12,270 --> 00:06:15,041
‫make it a bit shorter,

122
00:06:15,041 --> 00:06:16,458
‫addEventListener,

123
00:06:19,679 --> 00:06:20,820
‫keydown,

124
00:06:20,820 --> 00:06:23,103
‫and then the callback.

125
00:06:23,970 --> 00:06:25,350
‫Okay.

126
00:06:25,350 --> 00:06:29,220
‫But now of course this will work on any key press.

127
00:06:29,220 --> 00:06:31,530
‫So whenever any key is pressed,

128
00:06:31,530 --> 00:06:34,740
‫it will call this callback function

129
00:06:34,740 --> 00:06:37,140
‫and then our element will get focused.

130
00:06:37,140 --> 00:06:38,760
‫But we only want that to happen

131
00:06:38,760 --> 00:06:42,210
‫when the Enter key is pressed.

132
00:06:42,210 --> 00:06:47,210
‫So let's say E.code needs to be equal,

133
00:06:49,530 --> 00:06:50,400
‫Enter,

134
00:06:50,400 --> 00:06:53,670
‫and it really needs to be uppercase here.

135
00:06:53,670 --> 00:06:55,683
‫And so in that situation,

136
00:06:56,940 --> 00:06:59,883
‫then focus here on the input field.

137
00:07:01,170 --> 00:07:02,880
‫So let's see if that works.

138
00:07:02,880 --> 00:07:05,280
‫I'm going to hit the Enter key now

139
00:07:05,280 --> 00:07:07,713
‫and yeah, beautiful.

140
00:07:08,580 --> 00:07:11,070
‫But now let's say that I already had

141
00:07:11,070 --> 00:07:12,573
‫searched here for something.

142
00:07:13,470 --> 00:07:16,020
‫And so if I hit the Return key now,

143
00:07:16,020 --> 00:07:18,840
‫then of course it will simply focus here

144
00:07:18,840 --> 00:07:21,060
‫but it will not delete the text yet.

145
00:07:21,060 --> 00:07:23,850
‫But that's very easy to solve.

146
00:07:23,850 --> 00:07:25,920
‫We just say setQuery

147
00:07:25,920 --> 00:07:30,690
‫which we already get access to here in this component.

148
00:07:30,690 --> 00:07:33,543
‫So we just set that to an empty string.

149
00:07:34,890 --> 00:07:39,120
‫And so that should now work as I hit the Enter key again.

150
00:07:39,120 --> 00:07:41,550
‫And indeed there it is.

151
00:07:41,550 --> 00:07:43,530
‫There's just one final problem,

152
00:07:43,530 --> 00:07:46,920
‫which is let's say that I'm writing this

153
00:07:46,920 --> 00:07:48,850
‫and then I hit the Enter key again

154
00:07:49,710 --> 00:07:53,250
‫and so this will then delete the text that we have.

155
00:07:53,250 --> 00:07:56,850
‫So basically we don't want all of this here to happen

156
00:07:56,850 --> 00:07:59,850
‫when the element is already focused,

157
00:07:59,850 --> 00:08:01,740
‫so when it's already active.

158
00:08:01,740 --> 00:08:03,030
‫But luckily for us

159
00:08:03,030 --> 00:08:06,690
‫we can easily check which element is currently active

160
00:08:06,690 --> 00:08:10,980
‫thanks to the document.activeElement property.

161
00:08:10,980 --> 00:08:14,430
‫And so thanks to that we can say

162
00:08:14,430 --> 00:08:18,640
‫if document.activeElement

163
00:08:19,590 --> 00:08:23,610
‫which again is the element that is currently being focused.

164
00:08:23,610 --> 00:08:28,263
‫So if that is equal to our input element,

165
00:08:29,130 --> 00:08:34,130
‫so inputEl.current then just return.

166
00:08:34,740 --> 00:08:35,760
‫So in this case,

167
00:08:35,760 --> 00:08:37,833
‫basically just don't do anything.

168
00:08:39,780 --> 00:08:42,213
‫Now all right, so let's try that again.

169
00:08:45,360 --> 00:08:47,760
‫So that just works fine.

170
00:08:47,760 --> 00:08:50,970
‫But then if I write something and hit Enter,

171
00:08:50,970 --> 00:08:55,170
‫well then actually that still doesn't work

172
00:08:55,170 --> 00:08:59,253
‫so let's try to reload our page maybe that will fix it.

173
00:09:00,150 --> 00:09:02,853
‫So let's try that again.

174
00:09:04,500 --> 00:09:06,033
‫So here it still works.

175
00:09:07,590 --> 00:09:09,210
‫And now ah,

176
00:09:09,210 --> 00:09:11,310
‫now it's actually fixed.

177
00:09:11,310 --> 00:09:12,143
‫And with this

178
00:09:12,143 --> 00:09:15,600
‫we actually finish building this small feature.

179
00:09:15,600 --> 00:09:18,300
‫So it was just a minor feature

180
00:09:18,300 --> 00:09:20,760
‫but it was very helpful to understand

181
00:09:20,760 --> 00:09:25,760
‫how we use refs to select DOM elements in the React way.

182
00:09:26,430 --> 00:09:29,790
‫Now there's just one small thing that I'm noticing here

183
00:09:29,790 --> 00:09:32,280
‫which is that React is complaining

184
00:09:32,280 --> 00:09:34,200
‫about a missing dependency.

185
00:09:34,200 --> 00:09:37,380
‫And so yeah, this is once again really helpful

186
00:09:37,380 --> 00:09:40,470
‫because it tells us immediately what we have to do.

187
00:09:40,470 --> 00:09:44,133
‫So here we have to also place the setQuery function.

188
00:09:45,390 --> 00:09:48,180
‫And so that's because the setQuery function

189
00:09:48,180 --> 00:09:51,900
‫is indeed a prop to this component.

190
00:09:51,900 --> 00:09:53,340
‫And so therefore,

191
00:09:53,340 --> 00:09:55,590
‫since we are using it here in the effect

192
00:09:55,590 --> 00:09:59,280
‫we then need to declare it in the dependency array.

193
00:09:59,280 --> 00:10:02,520
‫Now dysfunction is not really ever going to change

194
00:10:02,520 --> 00:10:05,100
‫but React still needs this to be here

195
00:10:05,100 --> 00:10:06,333
‫in the dependency array.