Upward vertical scroll/jump when selecting a cell on 7.0.0-beta.13

[timminata]

Describe the bug

To Reproduce

1. Have a table longer than your screen height (also more columns than width but not sure if that is relevant)
2. Preferably a screen resolution >1080p, although it does seem to happen on smaller resolutions
3. Scroll down the list and double click/edit a cell - for us it was jumping up by about 4-5 rows each time

Link to code example: This is from our production app - fix for us was to downgrade to 7.0.0-beta.12 and the issue disappeared. Reporting here for visibility for others and in hope that it gets fixed. You can try this sandbox: https://codesandbox.io/s/react-data-grid-shift-demo-61r2l5?file=/src/App.js I clicked around a lot scrolled and resized and I was able to reprodce the issue several times on this minimal example. But note that it does not happen all the time. Suggest to scroll to the middle of the table (vertical an horizontal) and resize the window a few times and then start double clicking cells until you notice it.

Expected behavior

Should not jump

Environment

Browser -> Chrome 101.0.4951.67

• react-data-grid version: 7.0.0-beta.13
• react/react-dom version: 17.0.2

Additional context

After upgrading from 7.0.0-beta.12 to 7.0.0-beta.13 we started to get reports of cells jumping in our production app. Downgrading back to 7.0.0-beta.12 solved the issue.

[timminata]

Also noticed this jumps horizontally if you scroll to the bottom right in the linked codesandbox. Scroll to bottom right and double click a cell, it jumps to the left

[damnitrahul]

Can confirm, this still persists in 7.0.0-beta.16

[damnitrahul]

Upon further investigation, it looks like this happens when the key in columns is not unique.

Fix: Avoid using duplicate keys in columns

Working sandbox link with fix

cc: @timminata