Bug: autoFocus cannot be used with an anchor (link)

[joshkel]

React version: 18.2.0

Steps To Reproduce

1. Render an anchor / link (<a> tag) with autoFocus.

Link to code example: https://codesandbox.io/s/react-link-autofocus-itxvn4

Compare with https://codesandbox.io/s/html-link-autofocus-n9vk6f and https://n9vk6f.csb.app/, which demonstrates autofocus with a <a> tag in plain HTML.

The current behavior

autoFocus is ignored on a elements; it apparently only works on buttons, inputs, selects, and textareas.

The expected behavior

The link has the focus on render.

autofocus is a global attribute (see https://html.spec.whatwg.org/multipage/dom.html#global-attributes and https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus), and it's common (at least, in frameworks I'm familiar with) for button-style components that navigate elsewhere within the React app to render using the <a> tag, so it's valuable for <a> to support the same behaviors as <button>.

This may be a duplicate of #6868, although the reasoning there no longer applies under the current HTML specs.

[amirmahdizare]

Hi

This happens because If you render your React component into a detached element, React will call focus() too soon. This will result in the input not focusing when your React tree gets added to the DOM.

Solution

So to achieve this goal you can use the Anchor element Ref and the call the focus() method when the component did mount.
You can see this approach code in my code sandbox ;

https://codesandbox.io/embed/react-link-autofocus-forked-lod3su?fontsize=14&hidenavigation=1&theme=dark

I should also emphasize that you can focus on one element (also the first element) in each page load with this approach or autofocus attribute. and will ignore others.

Read more on MDN ;
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

[joshkel]

@amirmahdizare Thank you for your reply, but I don't think it applies in my case. As you can see from my sandbox, I'm not rendering into a detached element. (To demonstrate, modify the sandbox to set autoFocus on the Button component, which is rendered at the same time - the button receives the focus as expected.) I'm familiar with using a ref with the focus() method, but the idea of the autofocus attribute is to avoid having to write imperative code to manipulate the focus like this.

[rothsandro]

React DOM handles autoFocus only for buttons, inputs, selects and textareas but not for links. See finalizeInitialChildren and commitMount

[joshkel]

@rothsandro Thank you. That was my conclusion from looking at the React code; however, I think it's incorrect, since autoFocus is a global attribute, and since using button-style links is a common enough web design technique.

[priyanshu-code]

@joshkel I am not an expert into the issue but, I think the issue is with the href attribute, change the "/" to a "#" and the issue is resolved for me : from href="/" to href="#"
I tried making another button without autofocus with the href="/' and the unexpected behavior was still there.

[theKashey]

Related conversation - #11851 (comment)

But still not clear why it’s working for some elements, not for every focusable one

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[joshkel]

bump

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!