Material UI Dialog and React Data Grid not playing well together.

[Sushmeet]

Description Using Material UI Dialog, and trying to render the an editable React Data Grid, is not allowing to edit the cells. Set up a basic example of the React Data Grid in codeSandbox. Editable field works out well with just the react data grid. But once you combine it with Material UI Dialog it just doesn't let you edit content. I have gone through the earlier two issues opened regarding this here and following the advice of the solution here. But still no luck.

Code Sandbox here React-Data-Grid: version 7.0.0-canary.19

Tried using the React Portal idea but had no luck with that

[Sushmeet]

An update to this. If we add the prop disableEnforceFocus to the Material UI dialog, editing starts working, but now we don't see an update of what is being entered in the cell, until the user hits enter.

[Sushmeet]

I am posting a SandBox of a combination of solution that worked for this specific version. Creating a Portal which was one of the recommended ways didn't really work.

1. The combination that worked in the end was adding this prop disableEnforceFocus to the Dialog or the Modal component. It's documented here on material UI https://material-ui.com/components/modal/#limitations
2. Now once this was done, we could edit the cells but, not able to see any feedback. To fix this we used the css trick which was mentioned in one of the earleir posts, by giving a Z-index which was extremely high.

Here is a sandbox with that example https://codesandbox.io/s/react-data-grid-overlay-forked-243uz?file=/src/App.js

Hope this helps others, and If there is any thoughts on how we could fix this for the core library, happy to help make a PR for it.

[amanmahajan7]

Closing as it looks like https://github.com/adazzle/react-data-grid/issues/2473#issuecomment-870236367 worked. Please let us know if you this is still and issue and we can reopen this bug