search

nadbm / react-datasheet

Excel-like data grid (table) component for React
https://nadbm.github.io/react-datasheet/
MIT License
5.4k stars 457 forks source link

Windows scrollTop gets set to tables offset after editing #147

Open mitchellwarr opened 5 years ago

mitchellwarr commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@nadbm does this explain it?

furst commented 5 years ago

@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 commented 5 years ago

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

furst commented 4 years ago

@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