Datatable component blocks arrow events

[szanella]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I'm using the datatable component to display a set of rows, and the (activate) output to be notified of row clicks: when a row is clicked, I open a side panel that displays additional data, and I implemented it so that it listens to keydown events to move between the table rows when it's open. This was not working, though, as the table, being focused, would eat up all the keydown events to "do its thing" and would stop their propagation.

Expected behavior I would like this propagation stopping to be configurable. More specifically, I think the table should only react to keydown events (and therefore block them) if the developer wants it to.

Reproduction of the problem A bit too complex to set up.

What is the motivation / use case for changing the behavior? It's not possible to use keydown events on arrow keys.

**Please tell us about your environment: Max Os X El Capitan, Angular CLI 1.0.0

• Table version: 9.0.3

• Angular version: 4.2.5

• Browser: Chrome 59.0.3071.115

• Language: TypeScript 2/2

[dannyvenier]

can't you use the activate output event to indicate to the side panel which row is in focus?

[szanella]

You definitely have a point, but the problem come as soon as the table loses focus. Take this course of events as an example:

• I click on a table row, which opens my side panel over the rest of the window (the table still has focus, though)
• I use the arrow keys to navigate the rows, which triggers the activate event and allows me to navigate it through events fired by the activate output
• I use the buttons on the side panel, which of course makes the table lose the focus, which now goes on the panel component
• having lost the focus, the table will no longer be able to receive keydown events

My solution, in fact, was implementing a directive that, when the panel opens, moves the focus on it.

[dannyvenier]

Well, it's hard to picture your application without seeing it, but unless the table is a child of the side panel, they are not in the same event chain so the key events will never make it to the table if the focus is on the panel. I can't picture the use case but if scrolling the table while focused on the panel is something you need to do, I would have key listeners on the panel and invoke controls on the table from the side panel handlers (either through a shared service or through an Observer which emits between peers). Or you can implement up and down buttons on the panel to invoke the iteration through the table. If the panel covers the table you are navigating blind but again, I can't picture the use case.

However, I don't think you can expect a table component to know how to intercept events from a peer without you designing it as above. The DOM doesn't really provide for that.