[data grid] Difference in cell tab&select behavior between v5 and v6

[Edelf]

The problem in depth

Considering the follow examples documentation:
v5: https://v5.mui.com/x/react-data-grid/editing/#row-editing
v6: https://mui.com/x/react-data-grid/editing/#row-editing

When editing a row, pressing TAB from one cell to another would auto-select the the cell value in v5, but not in v6.

I can't find anything about this in the migration guide, or how to achieve the same behavior in v6.

How can we achieve this?

Your environment

`npx @mui/envinfo`

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

Search keywords: grid cell tab select
Order ID: 68154

[michelengelen]

This is actually different than the normal input behavior where an input that has text in it will select all of the text on focus. At first I thought this is a requirement for accessibility by WCAG standard, but it actually is not. From the WCAG docs:

• When text fields receive focus, a vertical bar is displayed in the field, indicating that the user can insert text, OR all of the text is highlighted, indicating that the user can type over the text.
• When a user interface control receives focus, a visible border is displayed around it.

In our case we support this standard by the second option already, so from a accessibility standpoint there is no need for action.

From a UX perspective this is a bit different and, IMO, highly opinionated. I myself do not like it when the text is selected in full when receiving focus.

If you still want to go back to the previous behaviour you could do this in 2 ways:

1. Create your own custom edit component, where you have full control over the focus and all related events
2. listen on the editing events, rowEditStart/cellEditStart. From there you can grab the input and select all text.

Option 2 is honestly a bit harder to accomplish.
Keep in mind that you are responsible for the tab-sequence when you provide custom components in the renderEditCell method. For reference: Tab sequence

Anything to add @MBilalShafi @romgrk ?

[romgrk]

The UX seems better for fully highlighted text, I'd be in favor of restoring that behavior.

[michelengelen]

In that case I will add this to the board