DataGrid throws DOMException: Node.removeChild when using onCellPrepared + editCellComponent + boolean value

[danieleff]

Bug Report

Package versions:

devexteme version: 20.1.7
devextreme-react version: 20.1.7

Steps to reproduce:

The following code:

<DataGrid onCellPrepared={() => {}} dataSource={[{a: true}]} >
    <Editing allowUpdating mode="cell" />
    <Column dataField="a" editCellComponent={() => <div></div>} />
</DataGrid>
<button onClick={() => this.setState({})}>Click</button>

Click the button

Current behavior:

Throws Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
The above error occurred in the component:
in editCellComponent (created by TemplatesRenderer)
in TemplateWrapper (created by TemplatesRenderer)
in TemplatesRenderer (created by DataGrid)
in div (created by DataGrid)
...

Expected behavior:

Clicking does not thow error

Screenshots:

N/A

The code was working in [email protected], but throws error in [email protected]+ versions.

[pgrodrigues]

Any update on this? I also get this exact error but I'm not able to reproduce it consistently, it only happens sometimes.

In my case, I do not use editCellComponent. I have many columns using cellRender and headerCellRender.

index.js:1 The above error occurred in the <TemplateWrapper> component:

    at TemplateWrapper (http://localhost:3000/static/js/0.chunk.js:41614:24)
    at TemplatesRenderer (http://localhost:3000/static/js/0.chunk.js:41975:43)
    at div
    at DataGrid (http://localhost:3000/static/js/0.chunk.js:42212:43)

react-dom.development.js:10307 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at HTMLBodyElement.removeChild (<anonymous>)
    at removeChildFromContainer (http://localhost:3000/static/js/0.chunk.js:314207:19)
    at unmountHostComponents (http://localhost:3000/static/js/0.chunk.js:324998:13)
    at commitDeletion (http://localhost:3000/static/js/0.chunk.js:325051:9)
    at commitMutationEffects (http://localhost:3000/static/js/0.chunk.js:327092:15)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:307785:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:307834:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:307894:35)
    at commitRootImpl (http://localhost:3000/static/js/0.chunk.js:326813:13)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:363455:16)
    at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:315191:14)
    at commitRoot (http://localhost:3000/static/js/0.chunk.js:326686:7)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:326028:7)
    at http://localhost:3000/static/js/0.chunk.js:315245:30
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:363455:16)
    at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:315191:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/0.chunk.js:315240:13)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/0.chunk.js:315228:7)
    at scheduleUpdateOnFiber (http://localhost:3000/static/js/0.chunk.js:325592:13)
    at Object.enqueueForceUpdate (http://localhost:3000/static/js/0.chunk.js:316403:9)
    at TemplatesRenderer.push../node_modules/react/cjs/react.development.js.Component.forceUpdate (http://localhost:3000/static/js/0.chunk.js:354701:20)
    at http://localhost:3000/static/js/0.chunk.js:41990:13
    at deferExecute (http://localhost:3000/static/js/0.chunk.js:56880:18)
    at deferUpdate (http://localhost:3000/static/js/0.chunk.js:56913:10)
    at deferExecute (http://localhost:3000/static/js/0.chunk.js:56899:70)
    at deferUpdate (http://localhost:3000/static/js/0.chunk.js:56913:10)
    at deferExecute (http://localhost:3000/static/js/0.chunk.js:56899:70)
    at deferRender (http://localhost:3000/static/js/0.chunk.js:56907:10)
    at inheritor._fireChanged (http://localhost:3000/static/js/0.chunk.js:122193:35)
    at inheritor._fireChanged (http://localhost:3000/static/js/0.chunk.js:130120:16)
    at inheritor._fireChanged (http://localhost:3000/static/js/0.chunk.js:49507:21)
    at inheritor.updateItems (http://localhost:3000/static/js/0.chunk.js:122179:16)
    at Array.<anonymous> (http://localhost:3000/static/js/0.chunk.js:121610:22)
    at Object._promise.<computed> [as done] (http://localhost:3000/static/js/0.chunk.js:58710:17)
    at inheritor._handleDataChanged (http://localhost:3000/static/js/0.chunk.js:121585:86)
    at inheritor._handleDataChanged (http://localhost:3000/static/js/0.chunk.js:138479:25)
    at inheritor._handleDataChanged (http://localhost:3000/static/js/0.chunk.js:49507:21)
    at Callback.that._dataChangedHandler (http://localhost:3000/static/js/0.chunk.js:121325:18)
    at Callback.push../node_modules/devextreme/core/utils/callbacks.js.Callback._fireCore (http://localhost:3000/static/js/0.chunk.js:56696:44)
    at Callback.push../node_modules/devextreme/core/utils/callbacks.js.Callback.fireWith (http://localhost:3000/static/js/0.chunk.js:56765:12)
    at Callback.push../node_modules/devextreme/core/utils/callbacks.js.Callback.fire (http://localhost:3000/static/js/0.chunk.js:56775:8)
    at inheritor._handleDataChanged (http://localhost:3000/static/js/0.chunk.js:123186:22)
    at fireChanged (http://localhost:3000/static/js/0.chunk.js:143613:5)
    at processChanged (http://localhost:3000/static/js/0.chunk.js:143676:7)
    at inheritor.handleDataChanged (http://localhost:3000/static/js/0.chunk.js:144075:11)
    at inheritor._handleDataChanged (http://localhost:3000/static/js/0.chunk.js:142327:37)
    at inheritor._handleDataChanged (http://localhost:3000/static/js/0.chunk.js:49507:21)
    at Callback.push../node_modules/devextreme/core/utils/callbacks.js.Callback._fireCore (http://localhost:3000/static/js/0.chunk.js:56696:44)
    at Callback.push../node_modules/devextreme/core/utils/callbacks.js.Callback.fireWith (http://localhost:3000/static/js/0.chunk.js:56765:12)
    at EventsStrategy.value (http://localhost:3000/static/js/0.chunk.js:51841:19)
removeChildFromContainer @ react-dom.development.js:10307
unmountHostComponents @ react-dom.development.js:21294

Edit
After further debugging and contacting support, the issue was related with the way DevExtreme's TemplateRenderer handles it behind the scenes when using Semantic UI Popup component in cellRender. Applying a filter to the grid and hovering the cursor on those Popup components while the grid is not yet ready, would trigger the issue. Ended up replacing Semantic UI Popup with DevExtreme Tooltip component and it's working fine now.

[onebalaban]

Hi,

If the issue still appears, we need to reproduce it on our side to find its cause. Please share a test project to demonstrate this behavior. We'll research the issue and do our best to find a solution. You can use our React template to create this project.