React-data-grid: Editing Data-grid does not work in a Dialog modal

[VinceMu]

Which version of React JS are you using?

✅ Officially supported ✅

• [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [x] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [x] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Steps to Reproduce

When the the data grid is rendered inside a material ui dialog component. Any time a cell is edited, only the last typed character is saved into the grid.
For example if I click on a cell and type "asd" only the character "d" is saved into the cell.

Expected Result

I am able to edit the data grid in the same manner as shown in this example.

Versions
material-ui/core: 4.30
react-data-grid : 6.1.0

Code

app.js

class App extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      open:false
    }
  }
  onClick=()=>{
    this.setState({
      open:true
    })
  }

  render() {
    return(
    <div className="App">
        blau blah blah
        <Button onClick={this.onClick}>
            some text
        </Button>
        <Dialog open={this.state.open}
                classes={{paper:{minHeight: '80vh',maxHeight: '90vh'}}}
                maxWidth={'lg'}
                fullWidth={true}>
          <Example/>
        </Dialog>
    </div>
    );
    }
}

Example.js copied from Basic Cell editing example in docs.

const columns = [
  { key: "id", name: "ID", editable: true },
  { key: "title", name: "Title", editable: true },
  { key: "complete", name: "Complete", editable: true }
];

const rows = [
  { id: 0, title: "Task 1", complete: 20 },
  { id: 1, title: "Task 2", complete: 40 },
  { id: 2, title: "Task 3", complete: 60 }
];

class Example extends React.Component {
  state = { rows };

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={3}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}

      />
    );
  }
}

[LBWright]

@VinceMu can you upload your cell editor code?

[VinceMu]

@LBWright I'm using the default cell editor. My usage of React-Data-Grid is copied straight from the first example in the docs.

[jmangel]

Any update on this? I'm not having the exact issue, instead when I double-click a cell to edit, it doesn't visibly change to the editor, it looks like I'm not inputting anything, though when I click "Enter" it correctly updates the value. I don't have a custom cell editor, though I do have a formatter ({ value }) => <span>{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value)}</span>. Only happens in a modal

[jmangel]

BTW, if it's the same issue as mine, mine worked when I added a style rule .rdg-editor-container { z-index: 10051 !important; }. (may have to adjust your exact value)

[Claim0013]

I'm having the same issue. Adding the z-index property didn't help. Any ideas?

[GGotha]

I'm having the same issue

[Claim0013]

I'm having the same issue

I ditched the material ui dialog and built my own modal. That's how I solved it.

[GGotha]

Oh, thanks! I did the same thing and it worked

[yahyamortassim]

Having the same issue

[Claim0013]

Having the same issue

I wouldn't wait for a solution tbh. Just create your own modal with divs.

{ this.state.open && <MyModal handleClose={this.handleClose} /> }

• And the class itself:

return ( <div className='modal-content'>content</div> )

• CSS - just style it how you want and add some shadow so it pops a bit. This is just an example class btw.

.modal-content { position: absolute; top: -245%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 24rem; display: flex; justify-content: center; align-items: center; width: 550px; border: 1px solid black; padding-top: 1px; box-shadow: 4px 4px grey; }

[qili26]

Just fyi, overriding css would work only when the modal doesn't result in a vertical window scroll bar. If the window has the vertical scroll bar, scrolling would cause the grid to move up while the editor interaction mask doesn't.

https://github.com/adazzle/react-data-grid/blob/next/packages/react-data-grid/src/ReactDataGrid.tsx#L125
You could pass the target editor portal dom to the grid after the RDG is mounted in the modal. This would render the interaction mask next to the modal (depending on where is the dom you want to render from createPortal) without the scrolling issue when it is appended to the bottom of <body /> (since most of time people would choose using portal to render a modal now). I don't have a working example at the moment, so you might need to tweak a little bit. However that props was created for this special case.

[amanmahajan7]

https://github.com/adazzle/react-data-grid/issues/1973#issuecomment-618605141

[skalma]

Hi, i am using RDG v6.1.0 with react 16.13.1 in chrome and i am still having this exact same issue. Tried making my own modal, but since i am rendering this in a material ui popover that pops up from another popover that does not solve things immediately. Now looking to use editorPortalTarget prop mentioned here. It defaults to 'document.body'. My question: how do i set this property, any example available? From looking at the code it must be set on the editor right?

[skalma]

I load RDG in div with id set to "reactdatagrid-editmultiflex".

return (
            <div id="reactdatagrid-editmultiflex" style={{width: "inherit"}}>
                <ReactDataGrid
                    columns={columns}
                    rowGetter={this.rowGetter}
                    rowsCount={this.state.rows.length}
                    minHeight={50+data.length*40}
                    onGridRowsUpdated={this.onGridRowsUpdated}
                    enableCellSelect={true}
                />
            </div>
        );

Then i set editorPortalTarget prop on editor:

let editor = <SimpleTextEditor editorPortalTarget="div#reactdatagrid-editmultiflex"/>

This does not fix it unfortuntely. Any hints on how to use this prop?

[skalma]

Made my own modal using REACTDOM.createPortal, still editing is not working.

[dlrandy]

For version 5 and 6, set up css, .rdg-editor-container{z-index: 100;}, the value may be bigger than this, editing may work