In v0.x we used to be able to add the keyboardFocused prop to a RaisedButton or FlatButton to focus it on render and activate the focus ripple. In v1, this yields an Unknown prop warning on the root element.
We could easily hijack the autoFocus prop to set the initial state of the button, but I'm assuming there is an issue if multiple autoFocused components are rendered, so we'd have to verify that this is the actual focused element when the dom is fully rendered?
Adding the autoFocus prop on a Button should trigger the focusRipple on render.
<Button autoFocus>
My button
</Button>
When looking for the DOM's activeElement, the root button is already properly returned.
The button is focused, but the focusRipple doesn't appear.
| Tech | Version |
|--------------|---------|
| Material-UI | next |
Adding the autoFocus prop on a Button should trigger the focusRipple on render.
I don't think so. The pulse ripple should only be displayed after keyboard interactions.
I'm closing the issue for #3008
I don't think so. The pulse ripple should only be displayed after keyboard interactions.
But how is the user going to know that the focus is on the button? For example: when a "danger" dialog appears naturally you would focus on Cancel so that clicking Enter does not perform the action. If the focusRipple is disabled on autoFocus the user will not know that the focus is on the Cancel button and will be forced to move the mouse or find the button using the tab (then he would need to press the tab multiple times as the focus is already set on the right position but the user does not know it). I personally think that displaying the focusRipple on autoFocus is more practical.
But how is the user going to know that the focus is on the button?
@enisdenjo Your use case is convincing.
Most helpful comment
@enisdenjo Your use case is convincing.