Portals [React-Compat] missing field and rendering problem

[+] Check if updating to the latest Preact version resolves the issue

React Portals has a property called “containerInfo” which can return the container itself. This is documented somewhere for sure, but I only found out from the Dart docs. https://pub.dev/documentation/react/latest/react_client.react_interop/ReactPortal-class.html This problem occurred while integrating with this proprietary library:

https://bryntum.com/docs/scheduler/#
https://bryntum.com/docs/scheduler/guide/Scheduler/integration/react/guide#rendering-react-components-in-column-cells

Where there is a React wrapper for the components, which uses Portals to move cells around. Relevant snippet:

if (portal) {
    // Move portal container back to the cell if we have one
    renderElement.appendChild(portal.containerInfo);
    renderElement.portalContainer = portal.containerInfo;
} else {
    // Create new portal container
    ...
    renderElement.portalContainer = _portalContainer; // Create a new portal in the portal container
    portal = ReactDOM.createPortal(reactNode, _portalContainer, portalId); // Add the new portal to Map

Here is what React produces:

A portal, with a component inside, with its children.

What Preact produces:

The container is okay, it but the children are missing from it:

Which is also part of the component:

The props children never shows up on the output.

Expected behavior

The compat library to incorporate this functions.

** Steps to reproduces **

1. Get the 45 day trial, and based of the doc, just override the cell renderer method with JSX

** Partial solution **

During debugging I already managed to link up the missing field with this code snippet, but this is sub optimal.

compat/src/portals.js

export function createPortal(vnode, container) {
	return createElement(Portal, { _vnode: vnode, _container: container, _expose: "containerInfo" });
}

compat/src/render.js

let oldVNodeHook = options.vnode;
options.vnode = vnode => {
	let type = vnode.type;
	let props = vnode.props;
	let normalizedProps = props;
	if (vnode.props._expose === "containerInfo") {
		vnode.containerInfo = vnode.props._container;
	}

I can do more debugging, just the output of the preact bundle is minified, and thats not ideal tracking whats not working as expected.

Any help would be useful, and would prevent a React switch. 😃

[JoviDeCroock]

@wahur666 your test has a typo, I think you meant to do this

	it('should render into a different root node', () => {
		let root = document.createElement('div');
		document.body.appendChild(root);

		const A = () => <span>A</span>

		function Foo(props) {
			const portal = createPortal(props.children, root);
			return <div>{portal}</div>;
		}
		render(<Foo><A /></Foo>, scratch);

		expect(root.innerHTML).to.equal('<span>A</span>');

		root.parentNode.removeChild(root);
	});

As you are not using Foo so we can’t render anything, this test succeeds

[wahur666]

The screenshots aren’t really telling me why that’s happening but given your initial code-snippet I assume it’s because of missing the containerInfo property? Would this addition fix it? like #3508

Please if you can, merge the fix, maybe someone besides me will make use of it, and you can close the issue.