square / cubism

Cubism.js: A JavaScript library for time series visualization.
https://square.github.com/cubism/
Other
4.94k stars 527 forks source link

Cubism not bubbling up left/right arrow key events? #16

Open faulkner opened 12 years ago

faulkner commented 12 years ago

I'd like to use Cubism on a page that also happens to have input fields, but it seems to be blocking the left/right keydowns events from bubbling up.

I have a hacked up version of the http://square.github.com/cubism/ landing page at http://bl.ocks.org/2983814 with an input field added to recreate the issue.

Not sure if this is a bug or if I'm just doing something wrong.

mbostock commented 12 years ago

The context listens for arrow key events to control the focused time. See context.js.

I think if you want to fix this, you'll either need a way to disable keyboard controls on the context, or you'll need to put the cubism charts inside a focusable element (e.g., <div tabIndex="1">) and put the input fields outside the focusable element. In the latter case, Cubism would also need to detect that it's inside a focusable element and put the key listeners there rather than on the window. I implemented something similar to Polymaps a few years ago; see focusableParent.

jarben commented 11 years ago

This would disable the key handler: d3.select(window).on("keydown.context-1", null);

hellige commented 9 years ago

Wouldn't it be pretty easy to make the key binding optional in a given context? There are lots of other options, seems like one more wouldn't be a big deal. Grabbing left/right for the whole window seems like something a lot of people might not want...