search

komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
http://ka-table.com
MIT License
769 stars 56 forks source link

Focusing/scroll issues when virtualization is enabled #424

Closed cetetesoft closed 2 months ago

cetetesoft commented 2 months ago

Hi.

I have one bug report and one enhancement suggestion regarding the scrolling behavior for virtualized rows.

When calling table.moveFocusedUp(), if the current cell is on top (ie from the 1st visible row), the table wrapper won't scroll up. This behavior is different from that of table.moveFocusedDown() for the last visible cell. In addition, the cell keeps the :focus-within style, even though I can tell it's not actually the active cell.

Steps to reproduce:

  1. You'll need a sample table combining keyboard navigation and virtualization.
  2. Move the table down so that the first visible row is not the first row of data. There will be some rows above that one (ie an empty <tr> with the height attribute).
  3. Select a cell from the first row.
  4. Press the ArrowUp key several times.
  5. Press the ArrowDown key several times. You'll need to press it as many times as ArrowUp.

Additionally, it would be nice for the scroll down behavior to more consistent. Right now, if you press ArrowDown having the last visible row selected, it will scroll the table by one row only if the last row is completely visible. When that row is partially visible, however, the table will scroll by about 50% of the visible height. Could this be customized in some way, like, scrolling just one row in all cases (like spreadsheet software such as Excel does)?

Thanks.

komarovalexander commented 2 months ago

HI @cetetesoft Can I ask you to provide stackblitz example with described behavior https://stackblitz.com/edit/table-many-rows-ts?file=Demo.tsx ?

cetetesoft commented 2 months ago

Sure, @komarovalexander . Here you are: https://stackblitz.com/edit/table-many-rows-ts-8seuhl?file=Demo.tsx

The demo will start with the cell (1;10) selected. The visible rows are 0 through 11. After pressing ArrowDown twice, the table wrapper will scroll down, showing rows 7 to 18. Regarding this behavior, could it be changed somehow to scroll by one row - ie showing rows 1 to 12, then 2 to 13, and so on?

Now, from this point (having the cell (1;12) selected and visible rows spanning from 7 to 18), if you press ArrowUp repeatedly, you'll notice you can't go any further than cell (1;7). The table wrapper won't scroll up and the selected cell is apparently stuck on row 7. However, if you press ArrowUp N times, you'll need to press ArrowDown N times again to get back to the cell above. This suggests the selected row may be actually being decreased with each keystroke, but it doesn't update the view accordingly.

I have tested this demo in both Chrome and Firefox with the same result.

komarovalexander commented 2 months ago

Hi @cetetesoft

Regarding this behavior, could it be changed somehow to scroll by one row - ie showing rows 1 to 12, then 2 to 13, and so on?

im afraid this is default behavior of html table, see example https://stackblitz.com/edit/table-keyboard-navigation-ts-prknhj?file=Demo.tsx click by cell and change focus using "Tab" key

komarovalexander commented 2 months ago

@cetetesoft

if you press ArrowUp N times, you'll need to press ArrowDown N times again to get back to the cell above

maybe it is not so obvious, but there are no rendered rows above, so you cant move the focus further. To fix that there is topInvisibleCount option in virtualScrolling so you can enable some items above visible line to be rendered as well. In this way ArrowUp will work https://stackblitz.com/edit/table-many-rows-ts-276fys?file=Demo.tsx