React-virtualized: keyboard navigation

[Guria]

Just throwing some ideas. Not sure if you decide it in the scope of your project but keyboard navigation support for Grid/FlexTable/VirtualScroll would be neat feature.
Main drawback that I see is that flex table row is placed completely in one grid cell. It means we will need several cell navigation implementation.

[bvaughn]

Keyboard navigation is already supported for the components you listed.

[Guria]

@bvaughn I mean navigation with ability to focus row/cell, not just scrolling.

[bvaughn]

I don't think I follow.

[Guria]

• click into row
• row got focused
• press down arrow key
• next row focused

https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus
https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/tabindex
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets

http://i.imgur.com/dunJ37h.gifv

[bvaughn]

Sure, I understand the concept of focus, just not what you were asking for. It seems like you're asking for the ability to _style_ the selected/focused row (or cell, presumably, in the case of Grid).

The current implementation of keyboard navigation in react-virtualized is only concerned with which cells are visible, not with their focus. Changing that might be complicated... also, tab is the usual mechanism for changing focus, not arrow key. Changing the behavior to be more focus-based would require me to manually manage focus. Hm.

It's an interesting suggestion. I'm not sure how much effort it would be. (Probably moderate.) Don't think it's a change I'll be looking to make any time soon to be honest, as this is the first time it's been requested but I'll be happy to leave this issue open as a "discussion" item to see if others have a similar need.

[Guria]

The current implementation of keyboard navigation in react-virtualized is only concerned with which cells are visible, not with their focus. Changing that might be complicated

Does it mean that HOC trying to manage focus could conflict with internal keyboard navigation implementation or it could be safely overrided?

[bvaughn]

Off the top of my head, it seems like using a HOC for that would be possible. But if I were going to do it- I would probably move the Grid#onKeyPress handler out of Grid and into a HOC (rather than try to add onto what is already there).

[Guria]

@bvaughn does it means it would require changes in react-virtualized?

[bvaughn]

I don't think it would _require_ them. I just said- if I was going to build it, I'd probably approach it that way. I also _think_ that a high-order component that adds focus would work with the current release. It would just be a bit redundant.

[cheahkhing]

In fact, i do see the needs for keyboard navigation. It is very user-friendly for those who use keyboard all the way. I am expecting the "arrow-down" "arrow-up" key can help me navigate the rows up and down, press "enter" will trigger selection, etc. Just like how Excel works with the cell focus.

[bvaughn]

Keyboard navigation is already supported, as pointed out above and as seen in the demo. Arrow keys can already be used to navigate up/down in FlexTable and VirtualScroll as well as left/right in Grid.

"Enter" does not trigger selection because, as I explained above, I don't track the concept of a "selected" (or focused) cell, just a range of visible rows.

If this is a feature you need, you have a couple of options:

• Create your own high-order component decorator as I mentioned above that adds this functionality.
• Work with @Guria to put together a PR to add this functionality. (Note that I might refuse it if I don't think it's a good fit for the library, at which point you would have to decide whether you wanted to fork or not.)

[bvaughn]

The new ArrowKeyStepper component (soon to be released in version 6) should make this behavior possible so I'm closing this issue. More specifically, here's a demo showing how you might approach it.