[question] How do I get the updated value of an edited field under getActions?

[fionaDawn]

The problem in depth 🔍

How do we set the value of disabled prop whenever cell value has changed? In v5 we were able to change the disabled prop when the custom edit cell value has changed. e.g, below is this recording where save button should only be enabled when name has a value.

v5.mov

We are running into a degrade of this behavior on the v6 version. Looks like actions cell type doesn't get rerendered everytime we call api.current.setEditCellValue triggered on text value change, and is now causing the save button to still be disabled even after filling in a name. Here's the recording of the updated code in v6:

v6.mov

and here's the sandbox link: https://codesandbox.io/p/sandbox/festive-alex-zqhhz4?file=%2Fdemo.js%3A1%2C19

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.7.1
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.0 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-alpha.118 
    @mui/core-downloads-tracker:  5.14.11 
    @mui/icons-material:  5.11.9 
    @mui/lab:  5.0.0-alpha.120 
    @mui/material:  5.14.11 
    @mui/private-theming:  5.14.11 
    @mui/styled-engine:  5.14.11 
    @mui/styles:  5.11.9 
    @mui/system:  5.14.11 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.11 
    @mui/x-data-grid:  5.17.25 
    @mui/x-data-grid-pro:  5.17.25 
    @mui/x-date-pickers:  6.10.2 
    @mui/x-date-pickers-pro:  6.10.2 
    @mui/x-license-pro:  5.17.12 
    @types/react:  17.0.47 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.7.4 

Search keywords: datagrid cell editing
Order ID: 51218

[michelengelen]

@MBilalShafi I tagged this as regression, but is it really a regression?
Not sure, since the recipe we do have in the docs does handle this differently (changes the icons when entering edit state for the row). IMO the current behavior (not re-rendering the whole row on each change) is to be preferred.

I can see some value in disabling the saving button when no actual changes are present, though I am not sure if we can support this with our implementation atm.

Could you please help out here?

[MBilalShafi]

We memoized our cells by default to improve scrolling performance, IMO it's a side effect of that improvement rather than a regression.

@romgrk Could you think of a clean way to manually trigger the re-rendering of a specific grid cell, to handle this case or other similar cases?

[michelengelen]

We memoized our cells by default to improve scrolling performance, IMO it's a side effect of that improvement rather than a regression.

Yeah ... IMO it felt like it was intended to behave that way, or rather the behavior before was unintended. Thanks for clarifying that @MBilalShafi 👍🏼

[fionaDawn]

clean way to manually trigger the re-rendering of a specific grid cell

definitely need this. if it was unintended behavior before, it has unfortunately caused a regression on our end and is blocking us to upgrade to v6 😭

[romgrk]

It's an intended behavior. Previously, we were re-rendering every cell at every change. Now, we re-render only when the cell state has actually changed.

To make your actions cell re-render when something changes, you need to establish a reactive binding to the grid's state with useGridSelector(apiRef, selector). That hook will run a selector over the grid state and update its inner state only when the selected value has changed. Ideally, you need to select the thinnest possible slice of state, to prevent useless re-renders.

Here is the fixed version: https://codesandbox.io/p/sandbox/blissful-frog-grhj9z?file=%2Fdemo.js%3A145%2C36

It's not obvious from the name, but .getActions is always run inside a render function, so using hooks is ok.

[romgrk]

This is explained in more details in the docs: https://mui.com/x/react-data-grid/state/#access-the-state

[fionaDawn]

Nice, this works for me now. Thanks @romgrk !