Tab to edit cell rendered with renderEditCell in row edit mode

[theobrasseurbentley]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-x-issue-template-forked-cqdinb?file=/src/App.tsx

Steps:

1. Focus cell with value cell_1
2. Press the tab key on the keyboard

Current behavior 😯

Focus remains on cell with value cell_1

Expected behavior 🤔

Focus moves to cell with value cell_2

Context 🔦

tab to the next cell in row edit mode

Your environment 🌎

npx @mui/envinfo

Browser: chrome

System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 113.0.5672.126
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.42)
  npmPackages:
    @emotion/react:  11.10.6
    @emotion/styled:  11.10.6
    @mui/base:  5.0.0-alpha.96
    @mui/core-downloads-tracker:  5.12.2
    @mui/icons-material:  5.11.16
    @mui/lab: ^5.0.0-alpha.98 => 5.0.0-alpha.98
    @mui/material: ^5.10.15 => 5.12.2
    @mui/private-theming:  5.12.0
    @mui/styled-engine:  5.12.0
    @mui/system:  5.12.1
    @mui/types:  7.2.4
    @mui/utils:  5.12.0
    @mui/x-data-grid:  6.3.0
    @mui/x-data-grid-premium: ^6.3.0 => 6.3.0
    @mui/x-data-grid-pro:  6.3.0
    @mui/x-date-pickers:  5.0.20
    @mui/x-license-pro: ^6.0.0-beta.3 => 6.0.4
    @types/react: ^18.0.21 => 18.2.0
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.8.4 => 4.9.5

Order ID or Support key 💳 (optional)

59960

[m4theushw]

I didn't understand correctly what is expected. If the cell is in view mode and I press Tab the focus is moved to the next focusable element. In the case of the demo provided it goes to body. If the row is in edit mode, then Tab goes to the next input element, because it's also the next focusable element. Note that we implement https://www.w3.org/WAI/ARIA/apg/patterns/grid/ and the Tab key is not used for cell navigation. See https://mui.com/x/react-data-grid/accessibility/#tab-sequence for more information.

[theobrasseurbentley]

Thank you for your answer
The example is missing a renderEditCell sorry. I added it to the live example.
Notice how in edit mode, focus does not move from cell with value cell_1 to cell with value cell_2 when pressing tab.
I expect it does.

[m4theushw]

When Tab is pressed and the currently focused cell is not the last one in the row we disable the default focus and delegate to the edit component to focus the appropriate element. We do this by passing hasFocus=true to the edit component. Here's one example from the bult-in edit component of the string column.

mui-x/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx

Lines 119 to 123 in 3d2939d

	useEnhancedEffect(() => {
	if (hasFocus) {
	inputRef.current!.focus();
	}
	}, [hasFocus]);