‫So let's not do the same thing
‫that we did before
‫which was to automatically focus on the input element
‫but this time using a ref.
‫And so let's start
‫by getting rid of this way of doing things.
‫And so again, let's now use a ref instead.
‫So using a ref with a DOM element happens in three steps.
‫First of all, we create the ref.
‫And so for that we use the useRef hook
‫as we just learned before.
‫So we just write useRef
‫and then we need to again make sure
‫that it is now correctly imported from React.
‫Okay, so let's go back.
‫So we call the useRef hook
‫and then here we pass in the initial value
‫that we want to be in that current property
‫that we just talked about.
‫Now in this case,
‫when we work with a DOM element
‫that is usually just null.
‫Now all right.
‫And so this will simply return a ref
‫that we can give any name to.
‫And so let's now store this
‫into a variable called inputElement
‫because that's what we will want to store inside this ref.
‫So we have our ref.
‫And now as a second step,
‫let's actually come to the element that we want to select.
‫And so all we have to do is to use the ref prop
‫and then we just pass in the ref that we just created,
‫so that's inputEl.
‫And so now these two are basically connected
‫in a declarative way.
‫So there's no need to manually do some Query selection
‫like this here.
‫So all we are doing is to tell React
‫that the ref that will contain this input element here
‫should be, well, this input element ref that we created.
‫And so now in order to use this ref in the third step,
‫we can use again the useEffect hook.
‫So a new function that simply runs on mount.
‫So we need to use an effect in order to use a ref
‫that contains a DOM element like this one
‫because the ref only gets added to this DOM element here
‫after the DOM has already loaded.
‫And so therefore we can only access it in effect
‫which also runs after the DOM has been loaded.
‫So this is the perfect place for using a ref
‫that contains a DOM element.
‫And so now if we want to do the same thing as before,
‫we just use our input element.
‫And then remember that we need to read the current property
‫which is basically like that box
‫where whatever we store in the ref will get stored.
‫So inputElement.current.
‫And so this here is now really the DOM element itself.
‫And so this is where we can then call the focused method on.
‫And just to show you,
‫we can also lock this to the console of course.
‫So inputElement.current,
‫give it a Save,
‫and let's manually reload here.
‫And so you see that just like before,
‫our input field got automatically focused
‫and also the DOM element itself
‫was rendered here to the console.
‫And so again,
‫this means that we successfully connected the ref
‫that we created here with this DOM element.
‫So simply by passing this ref into the ref prop.
‫And so then in a use effect after the DOM has been loaded,
‫we can use this DOM element inside the ref.current property.
‫All right, but now I actually want to do something
‫a little bit more interesting.
‫So to show you the new feature
‫that we now want to implement,
‫let's come to our demo here.
‫And now when I'm anywhere in the application,
‫I will hit the Enter key.
‫So I just did that
‫and then automatically this input field got focused.
‫And so that's a really nice feature
‫so that we can very easily search for movies.
‫So let's say that I had just searched for this movie
‫then I took a look at this one,
‫and now at a certain point,
‫again, I hit the Return key.
‫So the Enter key.
‫So you see that selected the field
‫and it also removed all the search Query text
‫that was still in there.
‫So let's implement that.
‫And so for that,
‫the first thing that we need to do
‫is to listen for that key press event.
‫And in fact, we already did something similar before.
‫So in the movie detail,
‫we already listened here to the keydown event.
‫Now in this case,
‫we do actually need to manually select here this document
‫and then add an event listener there.
‫So there we cannot use a ref
‫but that's just the way that things work in React.
‫So let's do that.
‫So document.addeEventListener.
‫And then on the keydown event.
‫And here let's actually again,
‫specify a callback function
‫which we will then create here
‫and we need to call it callback
‫and it gets access to the event object.
‫And let's place that here.
‫And so the reason why we placed this
‫in a separate callback function
‫was so that we could clean up after our event.
‫So return,
‫and let's use an arrow function here now,
‫make it a bit shorter,
‫addEventListener,
‫keydown,
‫and then the callback.
‫Okay.
‫But now of course this will work on any key press.
‫So whenever any key is pressed,
‫it will call this callback function
‫and then our element will get focused.
‫But we only want that to happen
‫when the Enter key is pressed.
‫So let's say E.code needs to be equal,
‫Enter,
‫and it really needs to be uppercase here.
‫And so in that situation,
‫then focus here on the input field.
‫So let's see if that works.
‫I'm going to hit the Enter key now
‫and yeah, beautiful.
‫But now let's say that I already had
‫searched here for something.
‫And so if I hit the Return key now,
‫then of course it will simply focus here
‫but it will not delete the text yet.
‫But that's very easy to solve.
‫We just say setQuery
‫which we already get access to here in this component.
‫So we just set that to an empty string.
‫And so that should now work as I hit the Enter key again.
‫And indeed there it is.
‫There's just one final problem,
‫which is let's say that I'm writing this
‫and then I hit the Enter key again
‫and so this will then delete the text that we have.
‫So basically we don't want all of this here to happen
‫when the element is already focused,
‫so when it's already active.
‫But luckily for us
‫we can easily check which element is currently active
‫thanks to the document.activeElement property.
‫And so thanks to that we can say
‫if document.activeElement
‫which again is the element that is currently being focused.
‫So if that is equal to our input element,
‫so inputEl.current then just return.
‫So in this case,
‫basically just don't do anything.
‫Now all right, so let's try that again.
‫So that just works fine.
‫But then if I write something and hit Enter,
‫well then actually that still doesn't work
‫so let's try to reload our page maybe that will fix it.
‫So let's try that again.
‫So here it still works.
‫And now ah,
‫now it's actually fixed.
‫And with this
‫we actually finish building this small feature.
‫So it was just a minor feature
‫but it was very helpful to understand
‫how we use refs to select DOM elements in the React way.
‫Now there's just one small thing that I'm noticing here
‫which is that React is complaining
‫about a missing dependency.
‫And so yeah, this is once again really helpful
‫because it tells us immediately what we have to do.
‫So here we have to also place the setQuery function.
‫And so that's because the setQuery function
‫is indeed a prop to this component.
‫And so therefore,
‫since we are using it here in the effect
‫we then need to declare it in the dependency array.
‫Now dysfunction is not really ever going to change
‫but React still needs this to be here
‫in the dependency array.