[DataGridPro][Bug] rowModesModel not set internally on initialization

[irgijs]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

I created an "Action" component that displays Action buttons for the DataGrid. It is possible to provide a flag indicating whether the action button should be displayed if the row is in edit mode, view mode, or both. This worked fine in v5. However, after updating to v6 I ran into an issue.

For this to work, I use the datagrid.getRowMode(rowId) API. However, despite the rowMode being set to "Edit" on initialization, getRowMode still reports the row being in view mode on the first render.

Link to live example: https://codesandbox.io/s/interesting-butterfly-fd5wdj?file=/Action.tsx:1680-1705

Steps:

1. Open the example. The delete icon is visible. It should not be visible however, because the row is set to "Edit mode".
2. If you click on the force update button, the entire grid is re-rendered and the delete button is gone.

Current behavior 😯

In the Action.tsx file, datagrid.getRowMode(rowId) returns GridRowModes.View, despite the datagrid being initialized with

rowModesModel={{
          "3fa85f64-5717-4562-b3fc-2c963f66afa6": {
            mode: GridRowModes.Edit
          }
        }}

Expected behavior 🤔

I expect the getRowModes (in Action.tsx) to return GridRowModes.Edit since this is how the row is initialized on the first render. This was also the behavior in v5.

If the datagrid state is empty due to internal changes on the first render, I would have expected the eventSubscriber within the Action.tsx to trigger the state update immediately after mounting. However, it doesn't do so either.

Context 🔦

I want to use my own Action component so that I can easily add action buttons for which I can set the visibility conditions. It worked well in v5, but it appears to be broken in v6 due to unexpected API changes or a bug.

Your environment 🌎

npx @mui/envinfo

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

Order ID or Support key 💳 (optional)

53023

[sgjohnston]

Is this the same issue as issue 9576? I also have run into this API change, where it worked on v5, but the API doesn't reliably reflect the state of the controlled edit mode with v6.11.1. For me, it means re-generating the columns definition much more frequently than I would like, because using the definition of the controlled modes model results in multiple dependencies, whereas directly using the API doesn't.

[irgijs]

It seems to be the same problem indeed, although I do not understand why the issue you refer to is closed. Passing the rowModeModel prop is not a good solution, because:

1. It results in prop drilling, and context hooks should help avoid this
2. If the getRowMode API hook is not reliable, it should not be publicly available.

[romgrk]

We're not keeping this part of the state in apiRef.current.state for some reason. We'll need to migrate it to make things work.

[VegarRingdalAibel]

Hi

From what I can tell this broke in 6.8.0 release

Tried to make a very small sample to show the issue.

In 6.7.0 it works https://stackblitz.com/edit/react-qtzade?file=Demo.tsx

After 6.8.0 it fails https://stackblitz.com/edit/react-qtzade-zngdgm?file=Demo.tsx

[VegarRingdalAibel]

Updated the sample with small toolbar where I loop all rows and set edit mode. This also worked before, and is breaking apps we have.

[shoxter]

I believe we have this too (albeit not initial state but actual state prop for row mode model).

I have a switch that, if enabled, sets all rows to edit mode and, if disabled, sets them back to view mode.

It will successfully go into edit mode but not revert back to view mode even though the state is correct. Is this the same issue?