search

emilhe / dash-extensions

The dash-extensions package is a collection of utility functions, syntax extensions, and Dash components that aim to improve the Dash development experience
https://www.dash-extensions.com/
MIT License
409 stars 58 forks source link

Listen for keyboard events anywhere in the app #249

Open woutervddn opened 1 year ago

woutervddn commented 1 year ago

Getting keyboard event listening up and running was a challenge. Because of the website nor Github or Stackoverflow having a complete working example and the API being changed multiple times over its lifetime.

Now that I've got it running I'm in need of a 'global eventlistener' for keyboard presses. I've got an application with (among other things) a webcam image with a scatter plot on top of it. The idea is that left/right change the 'frame' within the same dataset and up/down changes the dataset as a whole.

I've wrapped my entire layout in the eventListener but I noticed that the eventListener only works whenever I've got an active input field. I'd like to be able to click anywhere on the page, even an empty space, and still capture a keystroke happening there.

I can find nothing about this in the documentation and I'm hesitant to include it via an external script as that kind of throws away the main selling point of Dash and generally feels hacky.

dales commented 1 year ago

I had a similar use case, I need to add keyboard shortcuts to my dash application. I ended up writing my own Dash React component that listens for key events and then emits custom events to the DOM. I then listen to these custom events with the EventListener component

emilhe commented 5 months ago

I believe this should be possible if you use the Keyboard component. If you do not pass it any children, it will attach to the man document. Please let me know, if it works as intended.