react-use-ripple icon indicating copy to clipboard operation
react-use-ripple copied to clipboard

fix: Avoid triggering too many effects when keeping keyboard key pressed

Open markelarizaga opened this issue 1 year ago • 0 comments

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): BeforeKeyboard

And this is how it looks with the fix (navigate with the keyboard to the button, and keep SPACE pressed): AfterKeyboard

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.

markelarizaga avatar Mar 23 '23 15:03 markelarizaga