Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
GabrielVooDB opened this issue Oct 22, 2024 · 2 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@GabrielVooDB
Copy link

GabrielVooDB commented Oct 22, 2024

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: #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

@GabrielVooDB GabrielVooDB added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Oct 22, 2024
@github-actions github-actions bot added the component: data grid This is the name of the generic UI component, not the React module! label Oct 22, 2024
@KenanYusuf KenanYusuf added the support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ label Oct 23, 2024
@KenanYusuf
Copy link
Contributor

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

@KenanYusuf KenanYusuf added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 23, 2024
Copy link

The issue has been inactive for 7 days and has been automatically closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/
Projects
None yet
Development

No branches or pull requests

2 participants