search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.12k stars 1.28k forks source link

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

Open sorensenmarius opened 4 months ago

sorensenmarius commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

It seems that the bug was introduced in this PR, which was included in v7.5.0. https://github.com/mui/mui-x/pull/13056