Steps to reproduce

Link to live example: (required)

Steps:

1. Open the example: https://stackblitz.com/edit/react-m6fhje?file=Demo.tsx
2. Click the edit button
3. CLick the close button

Current behavior

The rowModesModel is reset to {}, but the grid doesn't reflect this change.

Expected behavior

When the rowModesModel is changed from { [id]: GridRowModes.Edit } back to {}, the row with id needs to return to the default mode of GridRowModes.View.

Context

Currently it's not possible to use rowModesModel as a controlled property without knowing the actual state of the grid. This is problematic in the scenario of the referenced example, where the rowModesModel is derived from other state in the component. In a controlled scenario, one would expect that the grid reflects the state as presented in rowModesModel, and does not present different behavior depending on the previous values of this property.

This behavior goes against the idea of a single source of truth for each state

Overall, I'm looking for a reliable setup in which only 1 row can be editable at a time

Edit: For now it seems I can work around this by patching the rowModesModel with values from the previous render. In case it could help anybody: https://stackblitz.com/edit/react-m6fhje-31blaf?file=Demo.tsx

Your environment

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

Search keywords: rowModesModel