fixed-data-table-2
fixed-data-table-2 copied to clipboard
schrodinger
Support tabbing through inputs in grid
Expected Behavior
Tabbing through inputs scrolls grid
Current Behavior
Tabbing through input breaks layout because the row scrolls, but not the scroller See #149 for original filing & existing work around.
Possible Solution
- Capture any tab on an input bubbling up to the FDT component and prevent default on it.
- Query to get all tab-able inputs in grid (see Know which elements are tab-able here).
- Sort by tab order (tabIndex, position in DOM).
- Find the next element following event.target.
- Determine the row & column for that element and scroll to said row & column using scrollToColumn & scrollToRow functionality.
- Focus the next element.
POC: https://jsfiddle.net/y27o89s6/4/
Steps to Reproduce (for bugs)
https://jsfiddle.net/y27o89s6/1/
Context
Support for grid with inputs you can tab between
Your Environment
Likely affects all environments Chrome 57.0.2987.133 (64-bit) Ubuntu 14.04
How likely is https://github.com/schrodinger/fixed-data-table-2/pull/153 a fix for this?
I don't think #153 will fix this. Right now I anticipate it's best to build a one-off solution for your use case and maybe add an example back to the repo, similar to what was done for #149 and the POC linked above.
Ok thanks, we have been using FDT for our project since Dec and have had this issue in our backlog for a while, and it's now time we address it. I essentially have to decide whether to move to a different table solution, write a workaround (like your POC, but needs to work with IE) or try to fix the bug (not sure where to start with that one 🙁 )
The POC and a proper fix aren't too far apart. The need would be to make your we handle some set of possible input types / focusable elements and the right events. As well as ensuring we have cross browser support. The possible solution above and notes from #149 and probably useful as well.
Let me know if you do decide to go down that road and I can help talk through the problem.
Would it be possible to simply block the row from scrolling automatically, so the user will have to manually scroll when reaching the edge of the window?
Possibly. Since that's a browser based behavior, I think that would be implemented in your cell component on the input's focus. You could explore integrating some of the ideas from here: https://stackoverflow.com/questions/6740253/disable-scrolling-when-changing-focus-form-elements-ipad-web-app/31472878#31472878