[docs] Explain how to manage focus for custom edit components

[JerryTheIntern]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Stack Overflow:
https://stackoverflow.com/questions/75929528/using-mui-datagrid-tab-navigation-across-cells-does-not-work-with-rendercell

SandBox:
https://codesandbox.io/s/cell-tab-navigation-not-working-x996v7?file=/src/App.tsx

In the sandbox, click the pencil to edit the row, then try to tab from Custom 1 to Custom 2.
Also after tabbing away from Custom 2, try to shift+tab back to Custom 1.

You will find tabbing to change focus in these scenarios does not work as expected.

Current behavior 😯

Using tab to change focus to the next element when that element uses a renderEditCell does not work.

Expected behavior 🤔

Using tab to change focus to the next element should focus the next element regardless if a renderEditCell has been used or not.

Context 🔦

This is invaluable when creating new rows, as tabbing between columns is the quickest way to fill out all the data required for a new row.

Your environment 🌎

Tested in Chrome

Order ID or Support key 💳 (optional)

No response

[m4theushw]

The custom edit component needs to focus the input when the hasFocus prop becomes true. See #9020 (comment)

[AnastasiaEvgenia]

Hi
I have the same issue. I used custom text inputs, and changing fields with tabs (on row edit mode) stopped working. Is there a workaround? Are you suggesting to use a similar solution to #9020 (comment) at the custom component too?

[romgrk]

@AnastasiaEvgenia When did it stop working? Do you have an example?

[AnastasiaEvgenia]

Hi @romgrk

I created an example in the sand box bellow.
Press the edit pencil in a grid row and start pressing tab. When you reach DurationToStation to column, which uses a custom TextInput, tab stops in Email, and doesn't proceed.

https://codesandbox.io/s/mui-data-grid-example-5mm4qq?file=/src/gridExample/gridExample.js

[romgrk]

Did you observe a change in behavior recently? If so, for which version?

[AnastasiaEvgenia]

We recently upgraded to version 6.9.0.
Since the upgrade we have other issues too. One is related to this ticket #9475 (comment).

You can replicate the problem by uncommenting the columns email and/ or mobile phone, in this sandbox.
https://codesandbox.io/s/mui-editable-data-grid-editable-error-zrnh6l?file=/src/gridExample/gridExample.js

We also started having this error, that I am trying to replicate in a sand box to create an issue too.

[m4theushw]

Are you suggesting to use a similar solution to #9020 (comment) at the custom component too?

@AnastasiaEvgenia Yes. We need to update the docs to include this step. I fixed your CodeSandbox: https://codesandbox.io/s/mui-editable-data-grid-tab-stops-after-custom-text-input-forked-3ng8qd?file=/src/components/customEditComponent/customEditInputComponent.js

Since the upgrade we have other issues too.

Could you upgrade to 6.9.1? We just released a version with a fix for this bug.

[AnastasiaEvgenia]

Are you suggesting to use a similar solution to #9020 (comment) at the custom component too?

@AnastasiaEvgenia Yes. We need to update the docs to include this step. I fixed your CodeSandbox: https://codesandbox.io/s/mui-editable-data-grid-tab-stops-after-custom-text-input-forked-3ng8qd?file=/src/components/customEditComponent/customEditInputComponent.js

Since the upgrade we have other issues too.

Could you upgrade to 6.9.1? We just released a version with a fix for this bug.

Hi @m4theushw.
Thank you for the CodeSandbox correction.

After the version upgrade the maximum call stack size error stopped occurring.
But the error with edit component it is still happening. #9475 (comment)

[romgrk]

But the error with edit component it is still happening

#9530 (comment)