-
Notifications
You must be signed in to change notification settings - Fork 47.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
autofocus attr not included in button element when rendered #11851
Comments
This is intentional because it works very differently in different browsers. So instead of actually setting a DOM attribute, we polyfill its behavior in JavaScript. |
Oh wasn't aware of the cross browser behavior. What polly fill would you recommend to support native autofocus on buttons? |
We already include the polyfill. When you give I'm not really sure I understand your example. Two things can't be focused at the same time. React focuses the input in your example, but if you remove the input, it will focus the button, just like I'd expect. |
Ahh I see. The example was to demonstrate the presence of the autofocus attr itself on the rendered DOM element. In the real world example that started my research, I was rendering a button element into a dialog and it was not focusing when it was rendered. However using an input element instead in the same dialog would become focused. I'm trying to make sure that I can have a button in a dialog focused by default for an improved user experience and I wanted to rely on the browser implementation if possible which is often better at handling accessibility concerns. If the intent in React is to call focus in the same way that the browser would I'll see if I can prepare a more comprehensive example with an appearing component that doesn't receive focus properly. |
React just calls |
See #11159 (comment) and #11159 (comment) from my last investigation into this. |
@gaearon The problem with this approach is that it doesn't work if the input element is not visible on mount. I ran into an issue when using Bootstrap 4 modal - I want to focus the first child element that has the I created a generic component that wraps Bootstrap modal:
Example of use:
As you can see, I ended up using the DOM |
This complicates testing -- I want to assert specific input to be focused. Now I can not just assert |
Do you want to request a feature or report a bug?
bug
What is the current behavior?
autoFocus
prop on<button />
component is not rendered to the DOM. According to MDN autofocus is a valid attr for the button element.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
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 for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).
https://jsfiddle.net/pnkso56k/1/
What is the expected behavior?
autofocus attr should be rendered to DOM when provided as a prop to button component.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.2 in Chrome.
The text was updated successfully, but these errors were encountered: