TypeScript and Vue 3 Autofocus Form Elements
Transcript from the "Autofocus Form Elements" Lesson
[00:00:21] So what we're gonna learn right now is how to actually add autofocus to forms in a way that is consistent and works. What we want is the name to be the first thing that we focus on. And so the thing about reactive references is that they work both in the data context, and they work in the template context.
[00:00:37] So in other words, if we want an actual HTML element to be a reference, we just tell it what the reference is going to be called. So in this case, I usually like to preface any element that's gonna be an actual element with EL. So this is kind of back to the jQuery days where you might prefix it with a dollar symbol, I just prefer to keep it consistent that way.
[00:00:55] And then I'll call this NameInput, for example. And the way this works is up here inside of our reactive data though, we do you need to define it though. And how do we define that? Well, we have this element called NameInput, and it's going to be a reactive reference, just like the ref is in the template.
[00:01:26] However, we do know once it's loaded, it will basically put an input element in there. And so that's why, believe it or not, that's all it takes for this thing to exist. So if I log right now, log, whoops, that was the wrong, elNameInput, save it. So you'll see that if I go to the new page.
[00:01:46] You'll see that it's already fetching that input automatically. I don't have to go on mounted, check to see if that element exists, assign it to the ref, just it's there, it works. And that's kind of a little bit of the magic sprinkling that Vue does for us by assigning that ref to here.
[00:02:05] So it looks to map those two things. So that's a key thing to understand. Okay, now that we have this, we can say when everything has been mounted properly, so we'll call our onMounted life cycle hook, there we go. So when you have it mounted, your initial thought is probably going to say, okay, well I have NameInput, and I'm just gonna run focus on it.
[00:02:26] But as we see here, TypeScript is yelling at us because, again, we've said that it might be null, it might not be defined. So what I tried to do earlier here is I was, okay, well, we can check, right? You typically would say, if it exists, then just run this thing.
[00:02:40] But it's kind of being finicky because I think it's either the way the HTML element is being populated, like truthy value. So the way this actually works is you actually wanna provide a question mark at it. So we wanna actually unpack the value, cuz don't forget, element name input is a reactive reference.
[00:03:18] Although it makes me wonder now real quick, I wanna test this cuz if elNameInput.value, would that have done it? That works too. So that's the key. So this is where the unwrapping, that's why I say I wanted people to get used to seeing that, is because it's easy to forget this, to be honest.
[00:03:36] And so I was just like, yeah, it's definitely elName value, no it's .value, this works. But I gotta say, there is something clean about just saying, whenever this thing is available, just use it. So the optional chain here is a pretty nice solution for this. Now, when we refresh the page and go to new, you can see, automatically focused.