[DataGridPro] Error when editing with react 17

[mgprieto-soincon]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/blissful-scooby-t38hvj?file=/index.tsx

Steps:

1. Edit a cell
2. When blur get "Cannot read properties of undefined (reading 'name')" error

Current behavior 😯

Data grid throws and uncrontrolled error

Expected behavior 🤔

No to throws error

Context 🔦

At documentations, says that is compatible to version 17 of react:

"peerDependencies": { "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" },

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.22621 Binaries: Node: 14.18.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.58) npmPackages: @emotion/react: ^11.10.4 => 11.10.4 @emotion/styled: ^11.10.4 => 11.10.4 @mui/base: 5.0.0-beta.4 @mui/core-downloads-tracker: 5.13.4 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.134 => 5.0.0-alpha.134 @mui/material: ^5.13.6 => 5.13.6 @mui/private-theming: 5.13.1 @mui/styled-engine: 5.13.2 @mui/styled-engine-sc: ^5.12.0 => 5.12.0 @mui/styles: ^5.13.1 => 5.13.1 @mui/system: 5.13.5 @mui/types: 7.2.4 @mui/utils: 5.13.1 @mui/x-data-grid: 6.9.0 @mui/x-data-grid-pro: ^6.9.0 => 6.9.0 @mui/x-date-pickers: 6.9.0 @mui/x-date-pickers-pro: ^6.9.0 => 6.9.0 @mui/x-license-pro: ^6.9.0 => 6.9.0 @types/react: 17.0.30 => 17.0.30 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 styled-components: ^5.3.5 => 5.3.5 typescript: ~4.3.5 => 4.3.5 ```

Order ID or Support key 💳 (optional)

66837

[m4theushw]

It's crashing below because the field is not in the state anymore:

https://github.com/mui/mui-x/blob/904079dee0637a02b5d0562e93f9ea24e70c15d8/packages/grid/x-data-grid/src/hooks/features/editing/useGridEditing.ts#L160

In the row component we consider that the value may not be available:

https://github.com/mui/mui-x/blob/904079dee0637a02b5d0562e93f9ea24e70c15d8/packages/grid/x-data-grid/src/components/GridRow.tsx#L279

[tyrams]

I had the exact same experience on react 18 as well using create-react-app.

• It is worth noting that this happens on the open-source/ community version of x-data-grid as well.
• Also, for some reason the on the docs example works both on stackblitz and codesandbox but as soon as you run it locally it doesn't work.

TypeError: Cannot read properties of undefined (reading 'name')
    at useGridEditing.js:110:25
    at Object.unstable_getEditCellMeta (useGridApiMethod.js:14:22)
    at GridEditInputCell.js:71:73

[Arzh42]

I also had the same issue. In my case, the error isn't here for every item in the table or every time but seems to append whenever a row is dynamically added to the table. This row seems to bug for a few time and seems to disappear when we reload the page after some time. It makes me think of something like a cache that is emptied later on, but I didn't find anything around that.

[AnastasiaEvgenia]

Hello,

I have the same problem. Is there any update for this issue? Interestingly though, this error doesn't occur when I use custom editable components for the columns. For example if I set my column like this and use apiRef.curent.setEditCellValue(...), it works perfectly. { field: 'DurationToStation', headerName: t('DurationToStation'), minWidth: 120, flex: 1, editable: true, renderEditCell: (params) => { const { id, value, field } = params const apiRef = useGridApiContext() return ( <TextField name='DurationToStation' value={value} onChange={(evt) => { apiRef.current.setEditCellValue({ id, field, value: evt.target.value }) }} variant='standard' fullWidth /> ) } },

But, when I use the default column structure for edit, I get the error mention in this issue. { field: 'DurationToStation', headerName: t('DurationToStation'), minWidth: 120, flex: 1, editable: true, },

Order ID or Support key 💳 (optional)

67465

My Environment npx @mui/envinfo

System: OS: Windows 10 10.0.19045 Binaries: Node: 18.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.7.2 - C:\inetpub\wwwroot\Orion\node_modules.bin\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.58)
npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.9.3 => 11.11.0 @mui/base: ^5.0.0-alpha.134 => 5.0.0-beta.5 @mui/core-downloads-tracker: 5.13.4 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.122 => 5.0.0-alpha.134 @mui/material: ^5.11.12 => 5.13.6 @mui/private-theming: 5.13.1 @mui/styled-engine: 5.13.2 @mui/system: 5.13.6 @mui/types: 7.2.4 @mui/utils: 5.13.6 @mui/x-data-grid: 6.9.0 @mui/x-data-grid-generator: ^6.9.0 => 6.9.0 @mui/x-data-grid-premium: ^6.9.0 => 6.9.0 @mui/x-data-grid-pro: ^6.9.0 => 6.9.0 @mui/x-date-pickers: ^6.9.0 => 6.9.0 @mui/x-date-pickers-pro: ^6.9.0 => 6.9.0 @mui/x-license-pro: ^6.9.0 => 6.9.0 @types/react: 18.2.13 react: ^17.0.1 => 17.0.2 react-dom: ^17.0.1 => 17.0.2

[mgprieto-soincon]

Hello,

I have the same problem. Is there any update for this issue? Interestingly though, this error doesn't occur when I use custom editable components for the columns. For example if I set my column like this and use apiRef.curent.setEditCellValue(...), it works perfectly. { field: 'DurationToStation', headerName: t('DurationToStation'), minWidth: 120, flex: 1, editable: true, renderEditCell: (params) => { const { id, value, field } = params const apiRef = useGridApiContext() return ( <TextField name='DurationToStation' value={value} onChange={(evt) => { apiRef.current.setEditCellValue({ id, field, value: evt.target.value }) }} variant='standard' fullWidth /> ) } },

But, when I use the default column structure for edit, I get the error mention in this issue. { field: 'DurationToStation', headerName: t('DurationToStation'), minWidth: 120, flex: 1, editable: true, },

Order ID or Support key 💳 (optional) #67465

My Environment npx @mui/envinfo

System: OS: Windows 10 10.0.19045 Binaries: Node: 18.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.7.2 - C:\inetpub\wwwroot\Orion\node_modules.bin\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.58) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.9.3 => 11.11.0 @mui/base: ^5.0.0-alpha.134 => 5.0.0-beta.5 @mui/core-downloads-tracker: 5.13.4 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.122 => 5.0.0-alpha.134 @mui/material: ^5.11.12 => 5.13.6 @mui/private-theming: 5.13.1 @mui/styled-engine: 5.13.2 @mui/system: 5.13.6 @mui/types: 7.2.4 @mui/utils: 5.13.6 @mui/x-data-grid: 6.9.0 @mui/x-data-grid-generator: ^6.9.0 => 6.9.0 @mui/x-data-grid-premium: ^6.9.0 => 6.9.0 @mui/x-data-grid-pro: ^6.9.0 => 6.9.0 @mui/x-date-pickers: ^6.9.0 => 6.9.0 @mui/x-date-pickers-pro: ^6.9.0 => 6.9.0 @mui/x-license-pro: ^6.9.0 => 6.9.0 @types/react: 18.2.13 react: ^17.0.1 => 17.0.2 react-dom: ^17.0.1 => 17.0.2

Yes, in our case is also when we use default cells editor, when we override the edit component it works correctly. I don't know the state of the issue. We are waiting for the solution.

[AnastasiaEvgenia]

Hi @romgrk this bug seems to be persisting on our end, after we upgraded in version 6.9.1. This is a code sand box with the issue. When we don't use custom edit items we get the error on the screenshot.

https://codesandbox.io/s/mui-editable-data-grid-editable-error-zrnh6l?file=/src/gridExample/gridExample.js

[tomherbin]

Same problem as Anastasia here with 6.9.1

[bezchristo]

Getting the same issue with 6.9.1

[romgrk]

@tomherbin @bezchristo This issue is already fixed, we release at the end of each week.

[AnastasiaEvgenia]

@bezchristo @tomherbin I temporarily downgraded the grid to version 6.7.0, until the fix is available. This bug doesn't happen in 6.7.0, and neither this one https://github.com/mui/mui-x/pull/9516#issuecomment-1619996793