Fix portal unmounting (#8422)
We used to terminate the search on host nodes, and then use the nested unmount algorithm. However this means we didn't unmount portals inside the host nodes. We will probably need to restructure this somehow but for now I just added a recursive call to unblock myself.
Dan Abramov committed
Nov 25, 2016 at 21:43 UTC
e34b995f84370002e93875582bddbf3015407a98
3 files changed
+28
-2
scripts/fiber/tests-passing.txt
+2
-1
@@ -489,7 +489,8 @@ src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
489
* finds the first child when a component returns a fragment
490
* finds the first child even when fragment is nested
491
* finds the first child even when first child renders null
492
-* should render portal children
492
+* should render one portal
493
+* should render many portals
494
* should render nested portals
495
* should pass portal context when rendering subtree elsewhere
496
* should update portal context if it changes due to setState
src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
+21
-1
@@ -188,7 +188,27 @@ describe('ReactDOMFiber', () => {
188
}
189
190
if (ReactDOMFeatureFlags.useFiber) {
191
- it('should render portal children', () => {
191
+ it('should render one portal', () => {
192
+ var portalContainer = document.createElement('div');
193
+
194
+ ReactDOM.render(
195
+ <div>
196
+ {ReactDOM.unstable_createPortal(
197
+ <div>portal</div>,
198
+ portalContainer
199
+ )}
200
+ </div>,
201
+ container
202
+ );
203
+ expect(portalContainer.innerHTML).toBe('<div>portal</div>');
204
+ expect(container.innerHTML).toBe('<div></div>');
205
+
206
+ ReactDOM.unmountComponentAtNode(container);
207
+ expect(portalContainer.innerHTML).toBe('');
208
+ expect(container.innerHTML).toBe('');
209
+ });
210
+
211
+ it('should render many portals', () => {
212
var portalContainer1 = document.createElement('div');
213
var portalContainer2 = document.createElement('div');
214
src/renderers/shared/fiber/ReactFiberCommitWork.js
+5
@@ -283,6 +283,11 @@ module.exports = function<T, P, I, TI, C>(
283
commitNestedUnmounts(current.stateNode);
284
return;
285
}
286
+ case Portal: {
287
+ // TODO: this is recursive.
288
+ commitDeletion(current);
289
+ return;
290
+ }
291
}
292
}
293