Skip to content

[data grid] Keyboard arrow doesn't scroll #4282

@oliviertassinari

Description

@oliviertassinari

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

When using the Arrow keys, the new active cell is not visible

actual

https://master--material-ui-x.netlify.app/components/data-grid/#commercial-version

Expected behavior 🤔

When using the Arrow keys, the new active cell should be visible (scroll if necessary).

expected

http://0.0.0.0:3001/components/data-grid/#commercial-version

with

diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
index 710c9577..bc983146 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
@@ -172,7 +172,7 @@ function GridCell(props: GridCellProps) {
       const elementToFocus = focusableElement || cellRef.current;

       if (doesSupportPreventScroll()) {
-        elementToFocus.focus({ preventScroll: true });
+        elementToFocus.focus();
       } else {
         const scrollPosition = apiRef.current.getScrollPosition();
         elementToFocus.focus();

We can also see it behave correctly on the first demo of https://www.ag-grid.com/.

Steps to reproduce 🕹

Steps:

  1. Open https://master--material-ui-x.netlify.app/components/data-grid/#commercial-version
  2. Follow the previous videos

Context 🔦

It's a regression introduced in #2999 with the objective to fix #2508. I have found this by looking into #4280 in more detail. cc @m4theushw

I have tested it again #2508 (comment). It seems that the root problem in #2508 was solved closer to the root later on (I suspect in #3718). Therefore we could revert #2999 to fix this GitHub issue with no downsides.

Your environment 🌎

MUI X v5.7.0.

Order ID 💳 (optional)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions