[XGrid] scrollToIndexes is inconsistently scrolling rows into view

[cactusjosh]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When selecting a row at random then scrolling to that row anytime the selectedRow state changes, the scrollToIndexes method inconsistently scrolls (more like jumps) the row into view. If you look at my example and press the 'select a random row and scroll to it' button, you'll see it occasionally misses the row entirely and I need to scroll either up or down.
What's interesting is it seems to produce different results with a smaller data set. I have tried replacing my ID keys in the assumption that I had shared IDs which gave me a the wrong index, but this didn't make a difference.

I'm using useGridAPIRef() to access the following methods to achieve my goal:

• getRowIndex() to get the row index of the row I wish to scroll to
• getColumnindex() as above but for columns. I am not interested in horiztonal scrolling but it seems to be a required param for the following
• scrollToIndexes() which I understand takes a object parameter in this shape: { rowIndex: 1, colIndex: 1 } src: https://github.com/mui-org/material-ui-x/blob/726235cfc1510e62a2bce84c6a2b7b9ea8433589/packages/grid/_modules_/grid/models/gridCell.ts#L9
• scroll() to manually scroll (since scrollToIndexes doesn't seem to work).

I'm maybe misunderstanding how to properly scroll to any given row in the table but I was unable to find any documentation demonstrating how to do it so I had to do a bit of a deep dive into the source for scrollToIndexes.

Expected Behavior 🤔

scrollToIndexes() should scroll to the specified row in the table everytime, regardless of previous scroll position. The row should then be visible in the table without the user needing to scroll the table at all.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/material-uix-gridscroll-to-indexes-demo-simple-bzphc

Steps:

1. select the 'enable scrollToIndexes()button. this will use the out of the boxscrollToIndexes()` functionality
2. Select a row at random by clicking the 'Select a random row' button in the example
3. the row selected will either be visible in the table without the user scrolling, or it won't.
4. the row selected will never be at the same position (not always in the middle/top/bottom) - seemingly random enough

I have attempted to fix the problem myself by creating a similar scroll function (called custom). It works by taking n rows and mulitpliying it by rowHieght. Example:

• I want to select row [DataGrid] Implement Print export #200
• assume I'm at the top of the table (no scroll)
• 20 * pixel hieght of each row (30) = 20 * 30 = 600 px to scroll
• remove some abitrary value (because the calculation above doesn't seem to be 100%)
• scrollPositionFromTop -= 50;
• use scroll({ top: scrollPositionFromTop, left: 0 });

Context 🔦

I'm trying to programatically select a row (from a separate component) and scroll the row into view to save the user from scrolling hundreds of rows to find the one they're making changes to. I have a useEffect which listens for the selected row ID changing (which is essentially a pointer to the row in the table for this example). When the ID changes,scrollToIndexes fires off and should scroll the row into view for the user to see. I can select a row fine, but it's the scrolling part that is proving difficult to consistently achieve.

Your Environment 🌎

`npx @material-ui/envinfo`

Using Chrome both locally and in my example code.
 System:
    OS: Linux 5.11 Fedora 33 (Workstation Edition) 33 (Workstation Edition)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 1.22 GB / 15.26 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    npm: 7.13.0 - /usr/local/bin/npm
  Managers:
    Composer: 2.0.12 - /usr/bin/composer
    pip3: 20.2.2 - /usr/bin/pip3
    RubyGems: 3.1.4 - /usr/bin/gem
    Yum: 4.6.1 - /usr/bin/yum
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 10.2.1 - /usr/lib64/ccache/gcc
    Git: 2.30.2 - /usr/bin/git
    Clang: 11.0.0 (Fedora - /usr/lib64/ccache/clang
    Mercurial: 5.4.2 - /usr/bin/hg
    Subversion: 1.14.1 - /usr/bin/svn
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.6 - /usr/bin/docker
  IDEs:
    Nano: 5.3 - /usr/bin/nano
    VSCode: 1.55.1 - /usr/bin/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Go: 1.15.8 - /usr/bin/go
    Perl: 5.32.1 - /usr/bin/perl
    PHP: 7.4.16 - /usr/bin/php
    Python: 3.9.2 - /usr/bin/python
    Python3: 3.9.2 - /usr/bin/python3
    Ruby: 2.7.2 - /usr/bin/ruby
  Databases:
    MySQL: undefined - /usr/bin/mysql
    SQLite: 3.34.1 - /usr/bin/sqlite3
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0

Order id 💳

I don't have an Order ID.

[dtassone]

Thanks for raising this issue with all these details.

It might be due to a race condition 🤔

[DanailH]

I spent some time investigating it yesterday - what I found was that the higher the row index, the bigger the mismatch for the scroll top. Simillar happens when you start using the keyboard to scroll the rows vertically.

[oliviertassinari]

Simillar happens when you start using the keyboard to scroll the rows vertically.

Confirmed, vertical keyboard navigation doesn't work as soon as you scroll down: #1822.

[oliviertassinari]

This issue is very close to #1103.

[dtassone]

I'm planning to refactor this area as part of #1715, create a separate hook, something like useScrollWatch, that would do all the related scroll calculation and this method should probably go in as well.
Then we would be able to trigger some kind of event where the scroll has reached the bottom threshold and need more rows so fix the fetch row experience. It would also prepare for dynamic row height

[oliviertassinari]

Related to #1911, it might even be a duplicate.

[m4theushw]

Fixed by #2673. Here's the updated CodeSandbox using the latest beta: https://codesandbox.io/s/material-ui-x-grid-scroll-to-indexes-demo-simple-forked-lj47t?file=/src/App.tsx