preactjs/preact-compat

Bug: Portals aren't unmounting

edygarOliveira opened this issue · 1 comments

Problem

Portals (#486) are never unmounted. https://codesandbox.io/s/wk6y1j8777

Expected Behavior

They should clear the target once they are unmounted. https://codesandbox.io/s/9znym0r8yp

Possible solution

Instead of a Functional Component, a regular class component calling unmountComponentAtNode on componentWillUnmount could solve it.

Including this file:

import { createElement as h } from 'react';
import { unmountComponentAtNode, unstable_renderSubtreeIntoContainer as renderSubtreeIntoContainer } from 'react-dom';

class Portal {
	componentWillUnmount() {
		unmountComponentAtNode(this.props.container);
	}
	componentDidMount() {
		renderSubtreeIntoContainer(this, this.props.vnode, this.props.container);
	}
	render() {
		// render nothing at original location
	}
}

export function createPortal(vnode, container) {
	return h(Portal, { vnode, container });
}

and using the exported createPortal instead of the one in preact-compat solved it for me (as suggested in the 'possible solution' above).