How to properly deal with portal containers and the fullscreen API?

[janvorwerk]

Hello gents,

My app is using the DOM fullscreen API for several cases.

Let's consider two of them:

1. Part of the screen needs a lot of screen space… and still has many interactions that will open portaled content (popover…)
2. A dialog (Modal for instance) is showing a Youtube iframe, in which the user wants to trigger full screen mode to better view the video

By default, case 1 does not work because as soon as the component goes fullscreen, the document.body seems no longer visible so that any portaled component isn't either.

What I thought was a very smart move was to use the PortalProvider… despite the fact that it was flagged "UNSAFE".

export function SkPortalProvider(props: { children: ReactNode }) {
  return <UNSAFE_PortalProvider getContainer={getDomRoot}>{props.children}</UNSAFE_PortalProvider>;
}

function getDomRoot(): HTMLElement | null {
  return document?.fullscreenElement instanceof HTMLElement ? document.fullscreenElement : document.body;
}

Clever, ugh? Actually not so much because then, case 2 won't work any longer : as soon as the video goes fullscreen, the portal is changed, so that the dialog containing the video node vanishes…

Then I tried to be more clever than ever 😁…

function getDomRoot(): HTMLElement | null {
    // If there are existing modals/dialogs in document.body, keep using document.body
    // to avoid moving them when fullscreen is triggered. This prevents modals from
    // disappearing when fullscreen is activated.
    const hasExistingModals = document.body?.querySelector('[role="dialog"], [role="alertdialog"]') != null;
    
    if (hasExistingModals) {
      return document.body;
    }
    
    // Otherwise, use fullscreen element if available (for popovers within fullscreen),
    // or document.body as fallback
    return document?.fullscreenElement instanceof HTMLElement ? document.fullscreenElement : document.body;
}

… but then case 1 no longer works properly…

Hence my questions: did you guys consider using/supporting fullscreen? How did you do?

Many thanks in advance 🙏

[snowystinger]

Thanks for the discussion. We created the PortalProvider partially because someone needed to make use of fullscreen. It doesn't look like the group that needed fullscreen support contributed any tests however and we don't make use of it ourselves at the moment, so there may be some gaps we're unaware of. Would you be willing to put together a small test app in codesandbox or stackblitz or even in our storybook? That's probably the easiest way to diagnose what's going on or if it's just differing expectations.

At the very least, I think you're on the right track

[janvorwerk]

Thanks for the reply. Here is a test case that demonstrate the issue(s):

https://github.com/janvorwerk/react-aria-fullscreen (you even have the live demo on Vercel: link on the repo).

With the current code state ENABLE_PORTAL_PROVIDER = true, you can see that the dialog opens properly while in fullscreen… however, the video within the dialog no longer goes fullscreen.

The video directly in the <main> is there merely to show that this one still goes fullscreen, this is really due to the dialog & portal.

If you switch the flag to false, you get the other issue : once <main> is fullscreen, the dialog no longer opens.

Let me know if it's not clear.

Best