[data grid] Error when changing rowModesModel and rows at the same time

[sorensenmarius]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-wbis3e?file=Demo.tsx

Steps:

1. Press the "Set some other row data button"

Current behavior

Crashes with the following error
Error: MUI X: The data grid component requires all rows to have a unique id property.
Alternatively, you can use the getRowId prop to specify a custom id for each row.
A row was provided without id when calling updateRows():
{}

Expected behavior

Should set the new rows to the row parameter and the new computed rowModesModel to the rowModesModel parameter without raising an error.

Context

I want all my cells to be in edit mode at all times. This worked perfectly in 6.19.5, but no longer works on the latest version (7.6.1).

Your environment

npx @mui/envinfo

This is regardless of browser.

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (125.0.2535.67)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: 11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.43
    @mui/core-downloads-tracker:  5.15.18
    @mui/icons-material:  5.15.18
    @mui/material:  5.15.18
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid:  7.5.0
    @mui/x-data-grid-pro:  7.5.0
    @mui/x-date-pickers:  7.5.0
    @mui/x-date-pickers-pro:  7.5.0
    @mui/x-license:  7.2.0
    @mui/x-tree-view:  7.5.1
    @types/react: 18.3.2 => 18.3.2
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.2.2 => 5.2.2

Search keywords: datagridpro

[michelengelen]

Hey @sorensenmarius ... thanks for raising an issue here.
Looks like the state doies not update fast enough for the rowsModesModel to catch up.
I'll try to come up with a workaround, but won't make it today.

Tomorrow i'll have a look! 💪🏼

[michelengelen]

Hey @sorensenmarius I did manage to "fix" the error. Somewhat.
There is another problem that might be related to the original issue.

I did try some things out and the solution I came up with was holding both items, rows and rowModesModel in a state object so that they would get updated at the exact same time.

For some reason though the internal state of the data grid is not, so that I always end up in a weird state where the rows from the previous manual state get re-added, but without being in edit state. Here is the updated example of that: DEMO

I would need to do some more testing to see if this can be possible without this issue.

[sorensenmarius]

Thanks! I have a lot of functionality around this, so this would be kinda ugly for my implementation.

I'll just roll back to version 6 for now and wait for a fix if you can find one 😊

[michelengelen]

For now I cannot find a solution that works with the current version.
I will trag this as a regression and add it to the board so it doesn't get lost.
Thanks again for raising this and for your understanding! 🙇🏼

[sorensenmarius]

It seems that the bug was introduced in this PR, which was included in v7.5.0. #13056