-
Notifications
You must be signed in to change notification settings - Fork 49k
Description
Do you want to request a feature or report a bug? Bug
What is the current behavior? When unmounting a component that has a child being rendered under a different parent (with portals), react is throwing an error
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem:
https://codesandbox.io/s/73n31lwpjx
What is the expected behavior?
Component should unmount normally
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.8.1
Issue also happens with 16.7.0 (https://codesandbox.io/s/oxmpxmllvy)
The issue is only happening under very strict conditions:
- The component being rendered with ReactDOM Portals (Modal) should not render any HTML
- The parent component (Panel) should render Modal as the first component under <React.Fragment>
Avoiding this is as simple as moving Modal under some other HTML. I'm not entirely sure this is an issue or I'm just doing something wrong with Fragment and portals.
The actual error being thrown is:
react-dom.development.js:9254 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Activity
gaearon commentedon Feb 10, 2019
Seems like the same as #14434.
Want to look into it?
KhodorAmmar commentedon Feb 10, 2019
Sure, I might need guidance into where exactly to start looking though
gaearon commentedon Feb 10, 2019
I'm guessing it's somewhere here
react/packages/react-reconciler/src/ReactFiberCommitWork.js
Lines 741 to 775 in c11015f
Or here:
react/packages/react-reconciler/src/ReactFiberCommitWork.js
Lines 989 to 1077 in c11015f
KhodorAmmar commentedon Feb 10, 2019
Okay then I’ll take a look
gaearon commentedon Feb 10, 2019
You might also want to start by making a failing test. Here's some existing tests for portals.
react/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
Lines 418 to 462 in c11015f
Adds failing test for facebook#14811
KhodorAmmar commentedon Feb 11, 2019
Would this work? the test creates a component with the same criteria as the demo above and removes the child component via a state update. It currently breaks
https://github.com/KhodorAmmar/react/blob/1aa3167b15b2eaa74f9afeac16d498a781b8c09b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js#L464-L496
Also is ReactDOMFiber-test the correct place for the test?
KhodorAmmar commentedon Feb 11, 2019
Ok I was debugging the code and I believe I can pinpoint where is the issue coming from:
react/packages/react-reconciler/src/ReactFiberCommitWork.js
Lines 1040 to 1073 in c11015f
When the node is a HostPortal, and it is rendering nothing, and it is the first child under a Fragment, the currentParentIsValid is not being reset to false correctly in line 1071
Adding
currentParentIsValid = false;
in line 1044 is fixing the issue, all other tests are still passing.I just feel that it's a too general solution? Am I on the right path at least?
Adds failing test for facebook#14811
gaearon commentedon Feb 11, 2019
Thanks, this was very helpful. I sent a fix in #14820.
20 remaining items