[Button] Do not activates ripple on autoFocus

[thupi]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Expected behavior is that the button would trigger the ripple effect in order to visually tell that it has focus :-)

Current Behavior

The button component triggers the ripple effect when the focus is moved manually using (tab). But that behavior is not pressent when using autoFocus prop :-)

Steps to Reproduce (for bugs)

1. Go to the Material UI docs for dialogs.
2. Open a alert.
3. Observe the missing ripple effect on button.

Your Environment

Same as the current docs :-)

[oliviertassinari]

But that behavior is not pressent when using autoFocus prop :-)

@thupi Yes, it's. Try opening the dialog with the keyboard. The current behavior is correct. The pulsating ripple is here to show keyboard users where the focus is. Mouse users don't need it.

Duplicate of #3008

[thupi]

My bad, i was not able to find the issue that related to this.

@oliviertassinari However, my use case is that i have a login form and a dialog is shown when the email or the password is wrong. But due to this behavior a user can't know which of the actions that is going to be pressed when they press (Enter).

I read the issue you referenced but i was not able to find any easy way to start the ripple effect :-)

Do i need to get a refrence to the button and call som method on it or is there a prop like autoFocus i can use the get the behavior i am looking for :-) ?

[oliviertassinari]

my use case is that i have a login form and a dialog is shown when the email or the password is wrong. But due to this behavior a user can't know which of the actions that is going to be pressed when they press

@thupi The pulsating ripple should be visible if a keyboard interaction triggers the form validation and the display of the dialog. Are you assuming the user will start the interaction with the mouse and finish it with the keyboard 🤔?

The purpose of #3008 is to implement a standard keyboard focus API. So you can solve your use case.

is there a prop like autoFocus i can use the get the behavior i am looking for

The API will be imperative.

Do i need to get a refrence to the button and call som method on it

I'm not aware of a hacky workaround. But maybe there is.

[thupi]

@oliviertassinari You are totally right :-) ! I was not aware of that the button is able to detect whether or not keyboard was used to get to the Dialog :-) !

Thanks alot :-) Looking forward to the keyboardFocus API :-)