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

[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.

[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

[theKashey]

Related conversation - #11851 (comment)

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