Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Portal children always being mounted #1781

Merged
merged 3 commits into from
Jul 17, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 7 additions & 2 deletions compat/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,17 @@ function Portal(props) {
_this._container = container;
// Render our wrapping element into temp.
preactRender(wrap, container, _this._temp);
_this._children = this._temp._children;
}
else {
// When we have mounted and the vnode is present it means the
// props have changed or a parent is triggering a rerender.
// This implies we only need to call render.
render(wrap, container);
// This implies we only need to call render. But we need to keep
// the old tree around, otherwise will treat the vnodes as new and
// will wrongly call `componentDidMount` on them
container._children = _this._children;
preactRender(wrap, container);
_this._children = container._children;
}
}
// When we come from a conditional render, on a mounted
Expand Down
44 changes: 44 additions & 0 deletions compat/test/browser/portals.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -384,4 +384,48 @@ describe('Portal', () => {
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
});

it('should not unmount when parent renders', () => {
let root = document.createElement('div');
let dialog = document.createElement('div');
dialog.id = 'container';

scratch.appendChild(root);
scratch.appendChild(dialog);

let spy = sinon.spy();
class Child extends Component {
componentDidMount() {
spy();
}

render() {
return <div id="child">child</div>;
}
}

let spyParent = sinon.spy();
class App extends Component {
componentDidMount() {
spyParent();
}
render() {
return <div>{createPortal(<Child />, dialog)}</div>;
}
}

render(<App />, root);
let dom = document.getElementById('child');
expect(spyParent).to.be.calledOnce;
expect(spy).to.be.calledOnce;

// Render twice to trigger update scenario
render(<App />, root);
render(<App />, root);

let domNew = document.getElementById('child');
expect(dom).to.equal(domNew);
expect(spyParent).to.be.calledOnce;
expect(spy).to.be.calledOnce;
});
});