USelect: Why doesn't the autofocus HTML attribute work?

[tgeber]

Description

Hello everyone,

I have a form with several input fields.

The first field is a USelect (variant=outline). I want to select it (focus it, with a visible border ring) so that the user can navigate to the other fields from here using the Tab key. How do I do this?
If this doesn't work using an HTML attribute, is there any way I can program it using JavaScript?

This works perfectly on another form where, for example, a UInput component is used first.

Can someone please help me?

Thanks in advance and best regards from Germany,
Thomas

[HugoRCD]

@tgeber Does your code look anything like this?

[tgeber]

@HugoRCD yes it does...

And the first Select should be focused....

[HugoRCD]

@HugoRCD yes it does...

And the first Select should be focused....

There is no autofocus here 🤔

[tgeber]

@HugoRCD yes it does...


And the first Select should be focused....

There is no autofocus here 🤔

Exactly. And that's the problem. A UI library should be able to select (focus) any form component.

[HugoRCD]

@tgeber It's up to you to set the autofocus prop to the field you want

[tgeber]

@tgeber It's up to you to set the autofocus prop to the field you want

If you use the HTML autofocus attribute for USelect, it won't work.

How can I do it alternatively using JavaScript?

I've already tried using templateRef and .focus() (processingType.value.$el.nextElementSibling.focus()). This doesn't display a focus ring, so the user doesn't see that the focus is on the Select element.

[HugoRCD]

@tgeber It's up to you to set the autofocus prop to the field you want

If you use the HTML autofocus attribute for USelect, it won't work.

How can I do it alternatively using JavaScript?

I've already tried using templateRef and .focus() (processingType.value.$el.nextElementSibling.focus()). This doesn't display a focus ring, so the user doesn't see that the focus is on the Select element.

I can add the autofocus prop and it works as you wish 🤔
Would you mind sharing a reproduction ?

[tgeber]

@tgeber It's up to you to set the autofocus prop to the field you want

If you use the HTML autofocus attribute for USelect, it won't work.
How can I do it alternatively using JavaScript?
I've already tried using templateRef and .focus() (processingType.value.$el.nextElementSibling.focus()). This doesn't display a focus ring, so the user doesn't see that the focus is on the Select element.

I can add the autofocus prop and it works as you wish 🤔 Would you mind sharing a reproduction ?

For me, it only works when I refresh the page (F5). It doesn't work when navigating back and forth between different pages.

Is it perhaps due to the version I'm using? I'm using @nuxt/ui 3.1.3.

[tgeber]

I made a simple test page. The focus is not set when I navigate back and forth between this test page and another page.

[tgeber]

Hello @benjamincanac

The new attributes "autofocus" and "autofocusDelay" are already included in the published documentation for version 3.1.3, but when installing this version (pnpm add @nuxt/ui), your additions are still missing. When can we expect them?

Thanks for your efforts,
Thomas