search

adazzle / react-data-grid

Feature-rich and customizable data grid React component
https://adazzle.github.io/react-data-grid/
Other
6.91k stars 2.18k forks source link

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

Open Sushmeet opened 3 years ago

Sushmeet commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.