I've found that if the parent components props/state changes when an event is fired it will re-trigger the same event, i.e. firing twice. To be more specific, it happened when a new react-key-handler component with the same key binding was created on a different element. To illustrate the components
when I pressed 2 the button one would disappear and the keys would with new bindings:
[button two, key 1], [button three, key 2]
I've solved this by adding a setTimeout(.., 0) to the call. This could possibly be activated through a prop that wraps the onKeyHandle in a setTimeout function.
I've found that if the parent components props/state changes when an event is fired it will re-trigger the same event, i.e. firing twice. To be more specific, it happened when a new
react-key-handlercomponent with the same key binding was created on a different element. To illustrate the components[button one, key 1], [button two, key 2], [button three, key 3]
when I pressed
2thebutton onewould disappear and the keys would with new bindings:[button two, key 1], [button three, key 2]
I've solved this by adding a
setTimeout(.., 0)to the call. This could possibly be activated through a prop that wraps theonKeyHandlein asetTimeoutfunction.