Autofocus Practice

[00:00:00]
>> So now that we've practiced that, what I want you to do now is go ahead and do the same thing. I want you to autofocus any field you want on the NewDishForm that we have here. So what I'm doing right here is just, I sort of went ahead and did a little bit of a migration over to script setups.

[00:00:20]
And you'll have seen me do that a few times, so I figured no need to walk you all through that whole thing. So basically we have here the new-dish form, did you all do okay as far as getting everything autofocus the way you want it to? Great, this is good.

[00:00:31]
So let's run through this then. So once again, just like we talked about, the first thing we wanna do is decide which element will be referenced. So in this case I'll just pick this one, so again, element, I'll call it DishNameInput, just to be a bit more specific.

[00:00:47]
And then we define our ref, so const elDishNameInput, this is a ref that could be an HTML input element or null. And it will start out as null because when the page loads we don't know what it'll be. Then onMounted when the page has been loaded, we will go ahead and say, hey look, if dishNameInput.value exists with the question mark, then we'll go ahead and focus on it.

[00:01:16]
So just to make sure that all this works as expected. If we go over here to Dishes now and New, there you go Name automatically shows up.