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.16k stars 1.3k forks source link

[question] Prevent unsubmitted form data in master detail to be lost when scrolling due to virtualization #15060

Open GabrielVooDB opened 3 days ago

GabrielVooDB commented 3 days ago

The problem in depth

Start from this exemple: https://mui.com/x/react-data-grid/master-detail/#using-a-detail-panel-as-a-form

  1. Open all the master details.
  2. Add some text in the first master detail after Matheus.
  3. Scroll down in the grid without clicking the save button.
  4. Scroll back up.
  5. The text is back to being Matheus, the changes were lost.

I believe this problem is due to: https://github.com/mui/mui-x/pull/7969.

The example in the demo shows the issue, but actual problem we have in our code is that inside our master detail we have another datagrid with field that can be edited and if the user scroll without saving to look at other rows, the values in the master detail are lost. I understand that the save button is there to submit the form, but scrolling causing unsubmitted value to be lost is undesirable.

Is there a solution to this? Thank you

Your environment

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

Search keywords: Master Detail Order ID: 100223

KenanYusuf commented 2 days ago

Hi @GabrielVooDB

You're right to point out that this is due to virtualization of master details. It's the expected behaviour.

One way to solve this issue would be to lift the form state outside of the master detail, this way any input changes would not be lost when the master detail unmounts during virtualization.

Basic example here with react-hook-form https://codesandbox.io/p/sandbox/15060-master-detail-form-state-s7wm8j