Input focus on load

[howesteve]

Hello,

How to focus a <Input> by default on form load? I've found #33 which refers to docs, but it seems they are not there anymore.
Is there a way to refer to the internal's <Input> <input> node so that I can call node.focus()?

Thanks

[shinokada]

Due to A11y, I removed it.
From MDN,

Accessibility considerations
Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

If you want it, try to add autofocus to the component.

[howesteve]

Thanks for the quick reply, I forgot about autofocus.

[Maddin2Code]

That you removed the ability to ref an input component affects many use cases, not just setting the focus on load. For example, I need keyboard navigation between certain from elements, or I want to append a certain css class when a corresponding button (delete) is hovered. All that would be possible if the ref would still be accessible as with usual HTML form elements.

[gil-obradors]

Hello!
I have a question related to this thread.
I want to configure an autofocus on Input from Modal-Form. Like form element example

I would like to autofocus first input just on Modal has been opened, I put into <Input type="email" name="email" placeholder="[email protected]" required autofocus/> but doesn't work. I imagine that I need to append this attribute onmount/deploy
Before start a handmade customization I would like to ask if its a common behavior, and if it can be used to enhance this component. If it can be a common interest, I would try to make a PR, but I'm bit loosed, I need some tricks.

Is this need important enought to modify preparefocus? May be can search for an autofocus node if exists.

Thank you!

[mkmoisen]

@shinokada

I have a table where you can inline edit values by clicking on the cell. This turns the value in the cell into an Input component that can be changed by the user and then saved.

For accessibility, I have it such that a user can tab through the cells, and upon clicking enter, the cell will turn into the Input component.

However, I have no way to focus the input when clicking the cell.

It doesn't seem very intuitive for people using screen readers.

My understanding is that ally does not require totally banning the ability to focus an input element. So long as the focusing doesn't cause an inconvenient jump like you mentioned, it is acceptable. In fact in my case, not having the ability to focus the input element makes it much less intuitive.

And like Maddin2Code mentioned, there are lots of other use cases where we might want to get a reference to input.

What do you think?

[vincenzoml]

I need to focus a component programmatically when the user presses a keybinding (like the good old "press / to search"). I can't find a direct way to do that except using $$.root, is this intended? Or did I miss anything?

[BrendanJM]

Here's another use case for input focusing: we are building an inventory management system, and the input method is a scanner. The way a scanner works is it just inputs the text of the barcode you scan (e.g. 1234567) and hits enter. Without input focusing this is a lot more difficult to accomplish. Please correct if I am wrong, but autofocus only seems to work on load, rather than successive calls.

It is well understood that input focusing can have some accessibility considerations, but it does not mean that use of input focusing is inherently anti-accessibility.