react-use-ripple
react-use-ripple copied to clipboard
fix: Avoid triggering too many effects when keeping keyboard key pressed
What are you trying to accomplish?
When an element is triggering the ripple effect with a continuous press to the SPACE or ENTER keys, a huge amount of effects happens. This commit ensures the animation ends before listening to new triggers.
This is the error in action (navigate with the keyboard to the button, and keep SPACE pressed):
And this is how it looks with the fix (navigate with the keyboard to the button, and keep SPACE pressed):
What is the approach followed?
When the keydown
event happens, we remove the keydown
listener for the time the animation will last. Once the mentioned time is reached, we add the listener again.