Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
10. Autofocusing problems and how to fix them

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
OK, so we're just going to finish up by auto focusing this input when we land on this page. Now, if we go and open up our editor and add in an auto focus to this input here and we give this a refresh, you can see it works perfectly.
00:18
That's great. However, if I were to go ahead and enter in a URL here and hit get short URL, that works nicely. We can copy it.
00:27
We can do whatever we need to do. When I click generate another short URL, you can see that it doesn't go back to auto focus. That is just because within this page, when LiveWire re-renders, the auto focus doesn't take effect.
00:41
So how are we going to get around this? Well, we've already pulled in Alpine. So what we can actually do here is when we initialize this as a component, so we can just make this a Alpine component,
00:53
we can go ahead and access the element, which is this input. And then we can call any standard JavaScript method on this. So in this case, it's going to be focus. So basically, always focus this with the auto focus.
01:07
But then once this gets re-rendered by LiveWire, we're also going to go ahead and use the manual focus when this initializes. So let's go over and take a look at the difference. Let's enter in a URL in here.
01:22
Hit get short URL. We can do whatever we need. When we click this to go back, sure enough, Alpine kicks in. It auto focuses back on.
01:30
And of course, we can go in, enter another URL into this field. So just a really small tip there, because this kind of thing can get really annoying when we're re-rendering and things like auto focus don't work.
10 episodes• 53 mins

Overview

Volt is a functional API for Livewire that allows you to build Livewire components in a single file, alongside Blade templates. Pairing this with automatic route creation using Laravel Folio gives us a serious productivity boost.

So, let’s build a URL shortener while learning how Volt and Folio work!

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!