mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

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

Open irgijs opened this issue 2 years ago • 6 comments

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

irgijs avatar Aug 14 '23 08:08 irgijs

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.

sgjohnston avatar Aug 14 '23 09:08 sgjohnston

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.

irgijs avatar Aug 14 '23 09:08 irgijs

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.

romgrk avatar Aug 14 '23 15:08 romgrk

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 avatar Aug 23 '23 20:08 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.

VegarRingdalAibel avatar Aug 24 '23 08:08 VegarRingdalAibel

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?

shoxter avatar Aug 23 '24 03:08 shoxter

Is this still an issue in v8 of the data grid?

cherniavskii avatar Oct 21 '25 09:10 cherniavskii

This issue has been inactive for 7 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 5 days.

github-actions[bot] avatar Oct 28 '25 15:10 github-actions[bot]

This issue has been closed due to 5 days of inactivity after being marked stale.

github-actions[bot] avatar Nov 03 '25 03:11 github-actions[bot]