autoFocus attribute only works for input-like things

[macgyver]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
Adding autoFocus attribute to a react component that is not an input-like thing does not have the desired effect.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
fails to work with div https://jsfiddle.net/mrr0jdw7/
but works with input https://jsfiddle.net/mrr0jdw7/1/

What is the expected behavior?
I would expect that any focusable element could also receive the autoFocus behavior.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I haven't yet bisected the issue, please let me know if this is needed.

[bpartridge]

div tags do not support autofocus by the HTML spec (it is only a meaningful Content Attribute for tags specified in https://www.w3.org/TR/html5/forms.html, and it is not a Global Attribute in https://www.w3.org/TR/html5/dom.html#global-attributes).

It does seem that https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex allows you to make non-form tags focusable, but that when that attribute was standardized, no mention was made of autofocus having any effect, and Chrome 50.0.2661.102 OS X does not autofocus when the combination is present: https://jsfiddle.net/syof5evd/. So IMO React shouldn't go beyond the spec, and should ignore the autofocus on non-form tags, as it currently does.

As an end user, you could obtain a ref and focus on mount.

[jimfb]

Sounds like this is as per the spec. I agree we don't want to exceed the spec, and it sounds like we're doing whatever Chrome does, so I'm going to close this out. Feel free to continue the discussion on this thread, and we can re-open if our thinking changes substantially.

[macgyver]

+1, I was actually misreading the aria spec for the alertdialog role which states

initial focus goes to an element within the dialog

and then later on it goes into further detail

When the alert dialog is displayed, authors SHOULD set focus to an active element within the alert dialog, such as a form edit field or an OK button.

https://www.w3.org/TR/wai-aria/roles#alertdialog

Thanks for the discussion!

[hichemfantar]

This should be reopened, it clearly states in the mdn docs that autofocus is a global attribute.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

[AndersDJohnson]

Agree with @hichemfantar that MDN most recently states that autofocus is a global attribute that applies to all elements, and seems to indicate that it's supported in most modern browsers. Some of my peers also confirmed it works as expected when testing on some popular screen readers.

Can React allow this? Is there a way to force React to allow adding this on server-side render?