How to focus an input in a modal once opened?

[sebszocinski]

I can't seem to work out how to do this, I think its a timing issue.

[ryangjchandler]

Hey @sebszocinski, have you got a code snippet for your modal?

There's a couple of ways you could do this, but it's easier if I can see your code so I can tailor it to your use case.

[ahmedkandel]

Hi @sebszocinski you have to wait until Alpine updates the dom then focus in your input. To do so just make a new task in JS Stack by setTimeout:

$nextTick(() => {
    setTimeout(() => {
        document.querySelector('input').focus();
    }); // has a default time value of 0
});

[ahmedkandel]

Actually the setTimeout workaround I was using in v2.2.5 then I have checked now and it was fixed by @SimoTod in v2.3 #341 so it should be ok now to use $nextTick without setTimeout.

[SimoTod]

We still need to set a timeout if the code use transitions though (i think Caleb discussed that in his last video) so depending on the original implementations both solutions are valid.

[reppair]

Strangely enough it works only the first time for me in combination with livewire entangle, I ended up using it like so:

$watch('open', val => {
    if (val) $nextTick(() => {
        const inputToFocus = $refs['autofocus']
        if (inputToFocus) $nextTick(() => inputToFocus.focus())
    })
})

[ghost]

That worked for me:

nextTick(() => { setTimeout(() => { refs['wordfield'].focus(); }); });

[citricguy]

This mostly worked for me, but I was having trouble with Firefox and some mobile browsers. Got it working by adding a slight delay to the timeout of about 20-50ms.

For example:

x-on:click.prevent="$nextTick(() => { setTimeout(() => { $refs.queryfield.focus(); }, 50); });"

[sebszocinski]

Thanks for the help guys! I had previously tried $nextTick but didn't have any luck... I might have missed something.

I tried again with your example @ahmedkandel and it worked but I had to set a timeout of at least 3ms (kind of odd). I have a transition but that is set to 300ms, so I initially thought i'd need a timeout for at least 300ms but it turns out 3ms is enough for it to kick in... anything lower and it doesn't focus. I might just set it to 300 anyway to be safe....

I do wish there was a better way with less code.

Examples of my code :
(note i'm using Pug so I can't spread the nextTick function onto multiple lines)

Trigger:

.search
	i.far.fa-search(@click="openSearch = true; $nextTick(() => { setTimeout(() => { document.getElementById('searchInput').focus(); }, 300);});")

Modal:

#search(
	x-show="openSearch"
	x-transition:enter="transition ease-out duration-300"
	x-transition:enter-start="opacity-0 transform scale-90"
	x-transition:enter-end="opacity-100 transform scale-100"
	x-transition:leave="transition ease-in duration-300"
	x-transition:leave-start="opacity-100"
	x-transition:leave-end="opacity-0"
)
	.close(@click="openSearch = false")
		i.fal.fa-times
	.search-input
		input(name="search" placeholder="Search..." id="searchInput")
		.loading
			i.fal.fa-spinner-third.fa-spin.text-lg

	ul.search-results(@click="openSearch = false")

[ahmedkandel]

Inside wrapDataInObservable When a mutation occurs Alpine will debounce the DOM update to after all mutations in a new task with setTimeout to callback updateElements. At the end of elements update "in this case resolving x-show directive", it will execute transitions and show inside executeAndClearRemainingShowDirectiveStack then will walk through the $nextTick, But all of this happens in one single task.

The timing issue here is that executeAndClearRemainingShowDirectiveStack is using Promises to set a microtask that will resolve at the end of current task but also before the DOM renders. So in my opinion $nextTick should internally use setTimeout to separate the process in three tasks instead of two:

1. mutations.
2. elements updates with promises for x-show and transitions.
3. nextTick.

@sebszocinski in your case you will need a few microseconds as the promise will resolve immediately but you have to wait for requestAnimationFrame to call show(), you don't have to wait for the whole transition duration.

[ahmedkandel]

I think those cases lead us to the conclusion that $nextTick may need some improvements. I will dig more and try to figure out a solution that respects also transitions without asking the user to implement setTimeout inside $nextTick. Maybe I will create a PR to make $nextTick works that way the user expects.

Note: one of the possible solutions is to use "double requestanimationframe" for $nextTick

[ahmedkandel]

PR created #502

Codepen before PR https://codepen.io/tomorrowsystem/pen/yLYQxNp
Codepen after PR https://codepen.io/tomorrowsystem/pen/LYpXJpo

[paulcsmith]

This almost seems like something Alpine should handle (but I'm not sure). Like if a new dom node is added and has autofocus then it should be focused.

Thoughts?

[ahmedkandel]

If you add autofocus attribute to an element, the element will be focused once inserted in the document but will quickly lose focus after Alpine initializes the component as x-show handler will add display: none; to the element styles. Then it will never get autofocus, You will have to do it manually by using .focus()

Please consider also that autofocus is reserved for only one form-associated element also the accessibility guidelines recommend that you don't use it.

[paulcsmith]

Oh interesting. That is good to know. I had no idea!