fix(Portals): Portals render correctly even if the source does not exist

when the destination is rendered [fixes #138224093]
pivotal-cf · Jun 20, 2017 · 90820be · 90820be
1 parent e63c3dd
commit 90820be
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/library/spec/pivotal-ui-react/portals/portals_spec.js b/library/spec/pivotal-ui-react/portals/portals_spec.js
@@ -191,4 +191,18 @@ describe('Portals', function() {
       expect(orangeWheatley).toContainText('Stop panicking!');
     });
   });
+
+  describe('when the source is rendered significantly after the destination', () => {
+    it('renders the source portal into the destination portal', () => {
+      ReactDOM.render((<div><div className="orange"><PortalDestination name="chell"/></div></div>), root);
+      expect('.orange').not.toHaveText('Potato');
+      ReactDOM.render(<div><div className="orange"><PortalDestination name="chell"/></div><div className="blue">
+        <PortalSource name="chell">
+          <Potato/>
+        </PortalSource>
+      </div></div>, root);
+      expect('.blue').not.toHaveText('Potato');
+      expect('.orange').toHaveText('Potato');
+    });
+  });
 });
diff --git a/library/src/pivotal-ui-react/portals/portals.js b/library/src/pivotal-ui-react/portals/portals.js
@@ -20,7 +20,7 @@ export const reset = () => {
 export class PortalSource extends React.PureComponent {
   static propTypes = {
     name: PropTypes.string.isRequired
-  }
+  };
 
   constructor(props, context) {
     super(props, context);
@@ -29,6 +29,7 @@ export class PortalSource extends React.PureComponent {
 
   componentWillMount() {
     emitter.on('destination', this.setDestination);
+    this.setDestination();
     this.componentDidUpdate();
   }
 
@@ -49,7 +50,7 @@ export class PortalSource extends React.PureComponent {
     const {destination} = this.state;
     const destinationPortal = destinationPortals[this.props.name];
     if (destination && destination.portal === destinationPortal) return;
-    this.setState({destination: destinationPortal && {portal: destinationPortal, root: createRoot(destinationPortal)}});
+    this.setState({destination: destinationPortal && {portal: destinationPortal, root: createRoot(destinationPortal)}}, this.componentDidUpdate);
   }
 
   render() {