[data grid] rowEditCommit event not firing when using component prop or imperative subscription

[hartmatt]

The problem in depth

Hi, I'm having issues with the rowEditCommit event, which is not firing when changing a value in the data grid, when using either the component prop or the imperative subscription. Here's the relevant code:

const handleEvent = () => {
      const allRows = Array.from(apiRef.current.getRowModels().values());
      const countrySitesData = allRows.map((row) => {
         const totalSites = row.high + row.medium + row.low;
         return {
            countryCode: row.id,
            totalSites: totalSites,
         };
      });
      setCountrySitesData(countrySitesData);
   };

<DataGridPro
        {...other}
        onRowEditCommit={handleEvent}
/>

On the other hand, rowEditStart and rowEditStop events fire fine when entering and exiting edit mode, when using either the component props or imperative subscriptions. For context, I'm looking to share some current data grid state (totalSites per country (row)) with other sibling components. Any help appreciated :)

Your environment

System:
    OS: macOS 12.7.2
  Binaries:
    Node: 21.5.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 121.0.6167.85
    Edge: Not Found
    Safari: 17.2.1
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.29 
    @mui/core-downloads-tracker:  5.15.5 
    @mui/icons-material: latest => 5.15.2 
    @mui/lab: ^5.0.0-alpha.158 => 5.0.0-alpha.158 
    @mui/material: ^5.15.3 => 5.15.5 
    @mui/material-nextjs: latest => 5.15.3 
    @mui/private-theming:  5.15.5 
    @mui/styled-engine:  5.15.5 
    @mui/system:  5.15.5 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.5 
    @mui/x-data-grid:  6.19.2 
    @mui/x-data-grid-pro: ^6.19.2 => 6.19.2 
    @mui/x-date-pickers:  6.18.7 
    @mui/x-date-pickers-pro: ^6.18.7 => 6.18.7 
    @mui/x-license-pro:  6.10.2 
    @types/react:  18.2.45 
    react: latest => 18.2.0 
    react-dom: latest => 18.2.0 
    typescript: 5.3.3 => 5.3.3 ```

Search keywords: rowEditCommit
Order ID: 81795

[michelengelen]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. This codesandbox.io template may be a good starting point. You can find more codesandbox templates in our docs.

Thank you! 🙇🏼

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[hartmatt]

Hi, sorry for the delay in replying! Here's my issue minimally reproduced in codesandbox using the material ui nextjs example project for js, which I'm using. Example shows component prop approach with onRowEditCommit in Sites.js - on changing and committing values to a row, the event doesn't fire and weightedSitesPerCountry is not logged to the console. Changing prop to onRowEditStop logs to the console fine, however, it's not right for my use case, as the event fires before row changes are committed. For context, in my use case the useState hook is located in a parent component, as the countryWeighting array is shared with various sibling components of Sites.js for further calculations.

[michelengelen]

Got it ... Apparently there is a bug with that event commit. As it seems it does not get fired when exiting row edit mode.
Thanks for raising this issue and sry for being so late with our reply 🙇🏼
I will put this on our board to have a look at asap!

[michelengelen]

@cherniavskii I might be mistaken, but this seems to be the revision that introduced the regression: fc1bed7

[hartmatt]

thanks @michelengelen 😃 Is there a workaround you can suggest in the meantime?

[michelengelen]

Since you are not able to use the rowEditStop event I fear there is no workaround for now. Can you think of any @MBilalShafi ?

[MBilalShafi]

Looks like the rowEditCommit event belonged to the previous/legacy editing API and the prop was missed for deletion in #6016, it's not being used anymore in the new editing API. I've opened #12071 to schedule its removal in v7. Which should ideally be back-ported to v6 to reduce the confusion.

@hartmatt You could handle the problem by using the brand new way to handle edited rows i.e. processRowUpdate that fires on every row commit event, as explained in the v6 migration guide for the cellEditCommit event.

Closing the issue, feel free to comment or open a new one if there's a problem with the processRowUpdate callback itself.

Thank you

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @hartmatt?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[hartmatt]

thanks @MBilalShafi!