projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.46k stars 1.16k forks source link

Window blur leaves ActionEventBus Keys in a "stuck" state #919

Open somaraani opened 2 years ago

somaraani commented 2 years ago

Problem Description

I have a state that is activated using the control key. If I press (Ctrl-T) to open a new tab, my state is entered when control is pressed down, but since the KeyUp event happens in the new window, it is not registered, and thus ActionEventBus.getKeys() still returns Ctrl even though it is not pressed, which has the consequence of leaving me stuck in that state.

I confirmed this by adding a focus event listener on the window (but also works for any other event or button handler), and logging the event bus keys. Pressing Ctrl-T opens a new window, and returning back will trigger this event handler which then prints ['control'], even though no keys are pressed.

window.addEventListener("focus", (event) => { console.log(engine.getActionEventBus().getKeys()); }); 

The ctrl key remains in the keys array until I press it and depress it again at which point the KeyUp event fires;.

Reproduce

You can reproduce this by going to the demo, pressing shift which triggers SelectManyState then go out of the tab (press ctrl-t) and let go of shift. Come back to the demo and you'll notice you are still able to select multiple nodes, even with shift key not pressed.