autofocus doesn't work for focusing an input

[GRA0007]

In the documentation for a11y-dialog, it mentions that the library will look for an input with the autofocus property set when opening the dialog, however React doesn't support this property directly, instead requiring the use of autoFocus (notice the camel case), which doesn't render in the html and polyfills the autofocus behaviour provided by the browser. This of course doesn't seem to work with this library. Is there another method I can use to get autofocus behaviour in React aside from storing a ref to my input?

[KittyGiraudel]

Hello, and thank you for opening an issue.

I created a small demo with an input with the autoFocus attribute in the dialog, and it seems to work fine. Please let me know what I’m missing. :)

[GRA0007]

Thanks for the fast response! This is interesting because that example doesn't seem to work for me either. I just tested it with Chrome and Safari, it looks like Safari does actually get the focus set to the right place, although the input is only focused after pressing tab? Chrome doesn't appear to have any special behaviour (after pressing tab the container is focused).

So additionally, is the input field meant to immediately be focused? Reading through the code I can't see why not.

[phelipetls]

The autoFocus prop in React does not translate to autofocus HTML attribute, it's polyfilled to focus the element when the component mounts, see this comment.

The example did not work for me either.

I guess it should work by focusing the element on the A11yDialog's show event, but it's less convenient.

[KittyGiraudel]

I’m not sure the library can do too much about this but we should at least clarify it in the README.