Merge pull request #16 from antoinetissier/fix-race-conditions-when-swapping-nodes

Author: pimterry

src/index.tsx

@@ -199,7 +199,7 @@ class OutPortal<C extends Component<any>> extends React.PureComponent<OutPortalP
 
         // If we're switching portal nodes, we need to clean up the current one first.
         if (this.currentPortalNode && node !== this.currentPortalNode) {
-            this.currentPortalNode.unmount();
+            this.currentPortalNode.unmount(this.placeholderNode.current!);
             this.currentPortalNode = node;
         }
 

stories/html.stories.js

@@ -226,6 +226,40 @@ storiesOf('Portals', module)
             <Parent />
         </div>;
     })
+    .add("swap nodes between different locations", () => {
+        const numberOfNodes = 5;
+        const initialOrder = [];
+        for (let i = 0; i < numberOfNodes; i++) {
+          initialOrder[i] = i;
+        }
+    
+        const ExampleContent = ({ content }) => String(content);
+    
+        const ChangeLayoutWithoutUnmounting = () => {
+          const nodes = React.useMemo(
+            () => initialOrder.map(createHtmlPortalNode),
+            []
+          );
+          const [order, setOrder] = React.useState(initialOrder);
+          return (
+            <div>
+              <button onClick={() => setOrder(order.slice().reverse())}>
+                Click to reverse the order
+              </button>
+              {nodes.map((node, index) => (
+                <InPortal node={node}>
+                  <ExampleContent content={index} />
+                </InPortal>
+              ))}
+              {order.map((position) => (
+                <OutPortal node={nodes[position]} />
+              ))}
+            </div>
+          );
+        };
+    
+        return <ChangeLayoutWithoutUnmounting />;
+    })
     .add('Example from README', () => {
         const MyExpensiveComponent = () => 'expensive!';