This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
31. Autofocus when updating columns

Transcript

00:00
When we went ahead and clicked to add a card, we know that we autofocus the input here.
00:05
Same thing for adding a column. But we didn't do this for the input just inside of here. Let's go ahead and do that now. OK, so if we head over to our column component at the very top where we had our editing state here,
00:19
remember that we always wrap this in an xif, which means that whenever this is rendered, we can attach this with xinit to do something. Let's go ahead and do that now with L and focus. And we're pretty much done.
00:32
We just missed doing that earlier. OK, let's hop over and see the difference. When I click on this now, we're ready to edit this. And of course, hit Enter to save that out.

Episode summary

In this episode, we notice that while adding a new card or column autmatically focuses the input so you can type right away, we forgot to do this for editing an existing column. So, we jump into the column component and tweak it so the input field gets focused as soon as you start editing.

We use an x-if to only render the editor when needed, and then hook into Alpine's x-init so that when the input appears, it immediately receives focus. This way, you don't have to click again before typing. We wrap up by checking the change in the browser—now, as soon as you edit a column, you can start typing the new name right away. Much better UX!

Episode discussion

No comments, yet. Be the first!