[data grid] Keyboard navigation doesn't work when active cell is out of the viewport

[shelimov]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Whenever I press any of the arrow keys, it applies scroll to the window.
https://codesandbox.io/s/1cm3xe?file=/demo.tsx

Screen.Recording.2022-08-10.at.17.22.26.mov

Expected behavior 🤔

DataGrid should select the next cell and scroll it into view.
The same way it works in ag-grid.

Screen.Recording.2022-08-10.at.17.27.51.mov

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[DanailH]

Hi, @shelimov thanks for raising this!
It is easily reproducible. It seems to be related to the focus, I think. @m4theushw I remember we discussed it some time ago but I'm unsure if it is the same problem or not.

[m4theushw]

We need to keep the focused cell in the viewport. With virtualization enabled, it's removed as you scroll. I'm working on a POC to fix this and also #4744. For now, if you're using a small dataset, you can disable the virtualization with disableVirtualization and it will work correctly.

[oliviertassinari]

I would expect #4282, #4749, and #2508 to be linked to this problem. The symptoms feel the same, involving the focus and out-of-viewport cells.

[bjornarvh]

Keeping focused cell in DOM might not be enough. This also happens for us when the data changes so that the focused record is no longer in the data. For example if the page changes with pagination enabled. The grid is not accessible by keyboard at all when it happens, as there are no tab stops in it.

This can easlily be reproduced in the pagination examples in your documentation. Focus a cell, change page, and try to focus the grid again with keyboard.