React-data-grid: Cannot in-line cell editing when the datagrid was under Modal

Created on 11 May 2019 · 4Comments · Source: adazzle/react-data-grid

Have you already searched for similar issues? Please help us out and double-check first!
Also, please don't be that person who deletes this template. It's here for a reason.
Thanks!

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

When the following code was placed. All in-cell editing will be failed.
When I was double click it, a strange behaviour, '_onGridRowUpdated_' was called 3 times

Modal component was from material-ui.

<Modal open={true} onClose={this.closeModal}>
      <ReactDataGrid columns={columns} rows={rows} />
</Modal>

When the Modal was removed, replaced with div or other simple tag, all will be resumed to normal.

Any solutions / css hack to tackle this problem ?

Source

wennyben

👍7

Most helpful comment

I think I'm seeing the same issue, it looks like nothing's being entered but when you press "enter" does the value update? It does for me. Would love to hear about a fix

If this is indeed the issue, I fixed by adding a style rule .rdg-editor-container { z-index: 10051 !important; }. Worked for me

jmangel on 29 Aug 2019

👍2

All 4 comments

I think I'm seeing the same issue, it looks like nothing's being entered but when you press "enter" does the value update? It does for me. Would love to hear about a fix

jmangel on 29 Aug 2019

👍1

I think I'm seeing the same issue, it looks like nothing's being entered but when you press "enter" does the value update? It does for me. Would love to hear about a fix

If this is indeed the issue, I fixed by adding a style rule .rdg-editor-container { z-index: 10051 !important; }. Worked for me

jmangel on 29 Aug 2019

👍2

I think I'm seeing the same issue, it looks like nothing's being entered but when you press "enter" does the value update? It does for me. Would love to hear about a fix

If this is indeed the issue, I fixed by adding a style rule .rdg-editor-container { z-index: 10051 !important; }. Worked for me

yeah .
its worked for me .

maybe we need upgrade the 6.x doc