In my React-based web app, I have a Material UI button that displays the default animation when you click on it.
import Button from '@material-ui/core/Button';
const App = () => {
// This is called in response to gamepad or keyboard input.
function onReceiveAlternativeInput(someInputStuff) {
// What can I do here to make The Button's click animation play?
}
return <div><Button>The Button</Button></div>;
}
I would like to programmatically display this same animation when alternative input methods are used to perform the same action as would be performed when clicking on the button. The alternative input could be a keypress or gamepad button press.
I've successfully simulated the synthetic event for clicking on the button following the approach described here. But it doesn't cause the animation to be shown.
Is there some clean way to programmatically play the click animation on a Button? I'm trying to avoid hacks that might be coupled to internals of MUI or cause unpredictable behavior. But it might be that a hack is how it gets done.