Windows scrollTop gets set to tables offset after editing

[mitchellwarr]

Ideally the window will work like normal and stay in the same position when editing elements.

I've tracked it down to this line. Whats happening is that tabindex of 0 on the containing span makes focus work a bit differently and the window containing it scrolls to its position, leading to a jutteryness.

https://github.com/nadbm/react-datasheet/blob/963887e3cc12e00dfbff89513feabe7cabca1930/src/DataSheet.js#L369

Is the on focus really required here? Taking out the tabindex=0 on the containing span (and hence making it unfocusable) fixes the issue and the window does not change scroll position when making edits with the spreadsheet

[nadbm]

Hey @mitchellwarr can you reproduce this, small video maybe? Im unable to reproduce this error. If this is not focused, a "tab" will focus outside the table

[mitchellwarr]

Hey so I have a small video uploaded on imgur for you to see this happening in action. The spreadsheet sits in an overflowed div.

In order for the horizontal flow to happen the edited cell needs to be offset to the left further than the container is wide.

Focus Event in Spreadsheet

[mitchellwarr]

@nadbm does this explain it?

[furst]

@mitchellwarr I had a similar issue but solved it by using react-window(for virtualization) and storing the scroll position on scroll. When dataSheet re-renders I use that previous scroll position along with initialScrollLeft and initialScrollTop

[iashris]

@furst Can you show us your implementation for react-window integration for virtualization?

[furst]

@iashris I ended up building my own sheet from the ground up for performance reasons. Even with react-window, the select-cell functionality did not keep up. Unfortunately, I don't have the old code on me anymore but I basically followed this example https://github.com/nadbm/react-datasheet/blob/master/docs/src/examples/OverrideEverythingSheet.js