Focus Management Exercise

[00:00:00]
>> Before you move on to exercise three, I want you to take notes on what you learned in exercise two so you remember this stuff. And now, we're moving on to exercise three. So we'll go close up the server node dev 3, open up 03 Readme, go to port 4003 and log in.

[00:00:25]
I'm going to not be on a slow 3G network for this one. And we'll go kody@remix.run and kodylovesyou. And there we go. Great, so we're all set with our focus management exercise. So for this one, if you look at the files here, we're still on the invoice ID route.

[00:00:50]
So we're still working within the same route. We want to focus on the element that has an error. So if we submit with an error, we want to automatically focus on the one that has the error. And if there is no error, we want to focus on the first input.

[00:01:13]
So the use case that you're thinking about is, you've got somebody who's entering in a bunch of deposits, they do this once a week, they enter in all the deposits for the week, and they don't want to have to move their mouse between every single time. They just wanna type it in, tap taps, hit Enter, and keep going, just move, move, move.

[00:01:33]
The challenge that you'll have here is because we're doing optimistic UI, sometimes we're gonna go back to the user, might actually go back to that input before we have a chance to query it out, and they might start changing it, right? So if that's what they've done, then you resetting the input will mess up their work.

[00:01:56]
And so you have to be a little bit smarter about how you're going to make sure you only reset it when it's appropriate. And yeah, so just some things to think about. That aspect is less about Remix and more about like thinking about good UX, but Remix is all about good UX.

[00:02:13]
And so we're thinking about these sorts of things. I gave you some good background information on how to accomplish this, and I think that should be enough for you to get started on exercise three. So have a good time.