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 <editCellComponent> 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.

Oct 08 '20 11:10 danieleff

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.

Nov 30 '20 17:11 pgrodrigues

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.

Feb 09 '22 09:02 onebalaban

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

Bug Report