[data grid] Custom cell with edit modal which does not close unexpectedly

[Kohei909Otsuka]

The problem in depth 🔍

I'm trying to write custom edit cell for specific use case , something like below.

https://mui.com/x/react-data-grid/custom-columns/#date-pickers
https://codesandbox.io/s/w45yyn?file=/src/Demo.tsx

Then problem is , whenever I hit enter key or tab key, grid takes the event as "stop edit mode", and modal closes.

Is there any good way to solve this?
I need custom cell with edit modal, which dose not close by mui x grid default event listener

Your environment 🌎

System:
OS: macOS 12.4
Binaries:
Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.8.0/bin/yarn
npm: 7.21.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
Browsers:
Chrome: 119.0.6045.123
Edge: Not Found
Safari: 15.5
npmPackages:
@emotion/react: ^11.7.1 => 11.11.1
@emotion/styled: ^11.10.4 => 11.10.4
@mui/base: 5.0.0-beta.6
@mui/core-downloads-tracker: 5.10.13
@mui/icons-material: ^5.10.9 => 5.10.9
@mui/lab: ^5.0.0-alpha.107 => 5.0.0-alpha.107
@mui/material: ^5.10.13 => 5.10.13
@mui/system: 5.10.16
@mui/x-data-grid: ^6.9.1 => 6.9.1
@mui/x-data-grid-premium: ^6.16.0 => 6.17.0
@mui/x-date-pickers: ^6.9.2 => 6.9.2
@mui/x-license-pro: ^6.10.2 => 6.10.2
@types/react: ^17.0.38 => 17.0.39
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
typescript: ^4.5.5 => 4.5.5

Search keywords: datagrid disable event on edit cell
Order ID: 68257

[DanailH]

Hi @Kohei909Otsuka thanks for raising this. I think you can find more about how to solve your problem here: https://mui.com/x/react-data-grid/editing/#editing-events

The following demo shows how to prevent the user from exiting edit mode when clicking outside of a cell. To do this, the onCellEditStop prop is used to check if the reason is 'cellFocusOut'. If that condition is true, it [disables](https://mui.com/x/react-data-grid/events/#disabling-the-default-behavior) the default event behavior. In this context, the user can only stop editing a cell by pressing Enter, Escape, or Tab.

Let me know if this is what you are looking for.

[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.