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.53k stars 1.32k forks source link

[DataGridPro] Row is still editable while save is in progress #12318

Open filipneculciu opened 8 months ago

filipneculciu commented 8 months ago

The problem in depth

I am building an editor inspired by your full-featured CRUD example here: https://mui.com/x/react-data-grid/editing/#full-featured-crud. If I understand your documentation correctly, processRowUpdate is the place to issue API calls that actually persist the changes on the back-end.

One issue I noticed is: after saving my changes, the row is still editable, the values in the cells can still be modified while processRowUpdate is waiting for a Promise to resolve, but any changes made while in this state are lost after processRowUpdate completes. This is a pretty confusing UX, I think the cells should stop being editable immediately (like the buttons in the "Actions" column are updated immediately).

I have forked your demo sandbox to illustrate this issue here: https://codesandbox.io/p/sandbox/eager-zeh-r76mr3?file=%2Fsrc%2FDemo.tsx . I have changed the DataGrid to DataGridPro and added a mock 5 second delay.

Am I missing something or is this a bug?

Your environment

`npx @mui/envinfo` System: OS: Windows 10 10.0.19044 Binaries: Node: 20.5.0 - C:\Program Files\nodejs\node.EXE npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (122.0.2365.66) npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.22 @mui/core-downloads-tracker: 5.14.17 @mui/icons-material: 5.14.16 => 5.14.16 @mui/material: 5.14.16 => 5.14.16 @mui/private-theming: 5.14.17 @mui/styled-engine: 5.14.17 @mui/system: 5.14.17 @mui/types: 7.2.8 @mui/utils: 5.14.17 @mui/x-data-grid: 6.18.0 @mui/x-data-grid-pro: 6.18.0 => 6.18.0 @mui/x-date-pickers: 6.18.0 @mui/x-date-pickers-pro: 6.18.0 => 6.18.0 @mui/x-license-pro: 6.10.2 @types/react: 18.2.36 => 18.2.36 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.2.2 => 5.2.2

Search keywords: cell editable Order ID: 70895

MBilalShafi commented 8 months ago

You have an interesting use-case!

One option to solve this could be to block user input using the loading prop: https://stackblitz.com/edit/react-vb49er?file=Demo.tsx

Let me know if it could work for you.

filipneculciu commented 8 months ago

We'll use the proposed workaround, but it would be better if just the saved row was disabled while processRowUpdate is running.

MBilalShafi commented 8 months ago

Your request definitely makes sense.

I've added a waiting for 👍 to check if there's more need among the community for such an enhancement so that we can prioritise it accordingly. Feel free to add a upvote reaction to the issue description.

Thank you