[popover]: crash on Chrome when using portalElement

[marg51]

Current behavior

Hello :)

On some Chrome browsers, when using portalElement, the tab crashes when opening the popover.

The popover does open for a few seconds before the tab crashes, as if there was some kind of infinite loop.

There is nothing in the console before the crash.

It's still unclear which browsers are impacted: for the same version, some people can replicate the crash, but not everyone -› there is an unknown external factor.

One of the Chrome versions impacted: Version 120.0.6099.109 (Official Build) (arm64)

We were initially on version 0.2.16 but we can also replicate it with the latest version.

On a team of 4 ( on mac )

• 2 can replicate
• 2 can't.
• One can replicate on Arc Browser.

Minimal reproduction step:

https://stackblitz.com/edit/vitejs-vite-dmafri?file=package.json,src%2FApp.tsx&terminal=dev

And thank you for the hard-work, we truly love using ariakit ❤️

Steps to reproduce the bug

1. preview
2. Click on "trigger"
3. you may have your tab crashing

This should be enough to reproduce it:

 <Ariakit.Popover
    store={popover}
    portalElement={document.body}
    portal
  >

Expected behavior

no crashes

Workaround

We've used react's createPortal instead

Possible solutions

No response

[georgekaran]

Hey @marg51

That's probably related to the following line which we should address properly in a near future. Both getRootElement and portalElement are returning the document.body which is probably the cause for the loop in this case.

ariakit/packages/ariakit-react-core/src/portal/portal.tsx

Lines 83 to 99 in a4ea0be

	useSafeLayoutEffect(() => {
	const element = ref.current;
	if (!element || !portal) {
	setPortalNode(null);
	return;
	}
	const portalEl = getPortalElement(element, portalElement);
	// TODO: Warn about portals as the document.body element.
	if (!portalEl) {
	setPortalNode(null);
	return;
	}
	const isPortalInDocument = portalEl.isConnected;
	if (!isPortalInDocument) {
	const rootElement = context || getRootElement(element);
	rootElement.appendChild(portalEl);
	}

Using any other element instead of the document.body and you should be good to go.