[data grid] `preProcessEditCellProps` prevents Enter from exiting the cell on custom edit cells about mui-x

[michelengelen]

Hey @sidneibjunior I did update your code with a working example: Custom edit input

The problem was with your component having the value in state and then updating when you wanted to stop the editing mode. The best way is to let the grid handle the values in the internal state and access it via the props that get passed into the component.

Does this fix your problem?

[sidneibjunior]

Hey @sidneibjunior I did update your code with a working example: Custom edit input

The problem was with your component having the value in state and then updating when you wanted to stop the editing mode. The best way is to let the grid handle the values in the internal state and access it via the props that get passed into the component.

Does this fix your problem?

Hi @michelengelen, thanks for the response.
I need to store intermediate values in the internal state, otherwise, the user cannot type partial temporary values, like ..
I made it work by moving the setEditCellValue with a debounceMs to the handleChange function, as you suggested in your example.

However, for performance reasons, I'd like to set the value to the datagrid only when the user stops editing the cell. Shouldn't it be possible? Why does having the preProcessEditCellProps prop make any difference in my example?

[michelengelen]

I am not sure why, but with adding preProcessEditCellProps we add a Promise to the function. Thats why the execution is not linear.
You can also convert handleKeyDown in your example to an async function:

const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter' || e.key === 'Tab') {
    const inputEl = e.target as HTMLInputElement;
    const newValue = inputEl.value;
    await apiRef.current.setEditCellValue({
      id,
      field,
      value: newValue,
    })
    apiRef.current?.stopCellEditMode({ id, field });
  }
};

[michelengelen]

You cannot fully rely on the Promise, so we cannot chain with a then, but this should do the trick.

[sidneibjunior]

I am not sure why, but with adding preProcessEditCellProps we add a Promise to the function. Thats why the execution is not linear. You can also convert handleKeyDown in your example to an async function:

const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter' || e.key === 'Tab') {
    const inputEl = e.target as HTMLInputElement;
    const newValue = inputEl.value;
    await apiRef.current.setEditCellValue({
      id,
      field,
      value: newValue,
    })
    apiRef.current?.stopCellEditMode({ id, field });
  }
};

Interesting. Adding the await really does the trick. Thank you.

[michelengelen]

Great ... glad we could help.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@sidneibjunior: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.