glide-data-grid
glide-data-grid copied to clipboard
glideapps
Auto-scroll to grid selection inconsistent
Hi,
I am attempting to sync two grids so that their horizontal grid selection and scroll is in sync visually, using the "Controlled Selection" story as inspiration, i.e. utilizing useState<GridSelection>
This works pixel perfectly in version 5.1.0, but in 5.1.1. it will sometimes "miss" an occasional "scroll" when setting the selection, resulting in a "one col off" situation. This will typically adjust/fix itself when moving to an adjacent cell.
PS. There is also a console.log("Cancel") left by in data-editor.tsx at line 2845
I will try to duplicate the issue, hopefully within a few days. Unable to share client work...
OK, I made a sample showing this issue.
It takes some fiddling; Something like: Select a cell in the top grid and use the right arrow key to move to the end, move keydown. Keep using the arrow left/right key to scroll right and left (keep keys down and make sure to scroll a "page" sideways. Keep doing that until you see the error, example screen shot below.
NOTE I also noticed that in the Glide data grid storybook stories, you will always see a complete rightmost cell when selecting to the right (same to the left). In this sample the rightmost cell will sometimes be clipped, and sometimes not (alternating actually) - i.e. the grid will not always scroll the cell into view. I suspect this is related to the original issue.
Please find a working sample here:
Screen shot from sample:
@jassmith Would you rather recommend utilizing initial scrollOffsetX, scrollOffsetY and scrollTo to sync scrolling on multiple grids? Can you advice how to capture scroll change events on a grid? P.S. Thanks for open sourcing this awesome grid :)
I would not use the scrollOffsetX/Y unless you have very special needs. I am still trying to work out what is going wrong here.
If I enable smoothScrollX={true} I can no longer reproduce the issue, can you confirm?
smoothScrollY={true} also worked for me, I wanted to align the last row to the bottom of the grid. @jassmith would you say this is a reasonable workaround? From the docs, it says disabling smoonthScrollY can drastically improve visual performance when scrolling. I really can't tell if there's a performance difference when scrolling and smoothScrollY is enabled or disabled.
After looking into this more. This is caused by accumulated offset errors. For now I do not intend to fix this as smooth scrolling is increasingly the dominant method of using the Grid and a lot of the performance impacts are entirely mitigated.