[DataGrid] Arrow navigation stuck in Action Cells

[Edelf]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using the keyboard arrows to navigate from cell to cell, if the cell is an GridActionsCellItem, the user can no longer navigate out of that cell.
Additionally, pressing enter on an Action keeps it in focus forever (see steps to reproduce).

Expected behavior 🤔

The user should be able to navigate using keyboard arrows to navigate out of the ActionCells.

Steps to reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/cqiqw?file=/demo.tsx (Straight from docs)
2. Select the first cell in the first row
3. Using arrows, navigate to the last column (Actions)
4. You can no longer navigate out of that cell using arrows.
   Additionally:
5. Still using the keyboard, hit enter on the pencil
6. Hit Tab to select the X (cancel) and hit enter
7. The trash icon is selected/in focus forever

Context 🔦

We want the user to be able to navigate through the grid using tab and arrow keys

Your environment 🌎

`npx @material-ui/envinfo`

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz  
  Binaries:
    Node: 16.6.1 - c:\program files\nodejs\node.EXE
    Yarn: 1.22.15 - c:\program files (x86)\yarn\bin\yarn.CMD
    npm: 7.20.3 - c:\program files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.61.2 - c:\program files\microsoft vs code\bin\code.CMD
Browsers:
    Chrome: 95.0.4638.54

Order ID 💳 (optional)

#28950

[DanailH]

Hi @Edelf thanks for raising this but it is a duplicate of #2914.
You can track this ticket #2880 for when to expect a fix for this. The solution will also fix the problem with the actions column.

[Edelf]

@DanailH thank you for the quick response.
Is there a way to navigate from cell to cell using tab, similar to what happens when the row is in edit mode?

[DanailH]

Navigating between grid cells is done using the arrows. You can check all the existing combinations here https://mui.com/components/data-grid/accessibility/#keyboard-navigation. The edit example is to make it easier.

[Edelf]

@DanailH this problem is still happening.
Same codebox, but with 5.1.0: https://codesandbox.io/s/fullfeaturedcrudgrid-material-demo-forked-xv21n?file=/demo.tsx

Once the user navigates to the Actions column using the arrow keys, he cannot leave.