Material-ui: [Button] Initial autoFocus does not show focus ripple

[albinekb]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

<Button autoFocus>text</Button> should show the ripple on the button just as tabbing to it does

Current Behavior

Initial render of <Button autoFocus>text</Button> will behave correct (if you press enter, the button is pressed) but it doesn't visually show it

Steps to Reproduce (for bugs)

code: https://codesandbox.io/s/jjvymvoo4w
demo: https://jjvymvoo4w.codesandbox.io/ (just press enter, try to tab around)

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.3.1 |
| React | v16.3.2 |

[oliviertassinari]

@albinekb I have seen this type of question a lot of time. The focus ripple is only here to help people using the keyboard. You will see the focus ripple if the focus is concurrent to a user keyboard interaction.

Use the focusVisible action if you really need to see the ripple, but I would encourage you to challenge this requirement with your product team. For instance, you can follow this thread #9659.

[albinekb]

Awesome. Thanks for clarifying. That makes sense. This is for an internal tool where i have "Approve" and "Reject" buttons, where I want the "Approve" button to be in focus when you go to the page, so you can see that you just need to hit enter to approve the thing. focusVisible is perfect for this. Again sorry for opening this issue, now I know 🙏