Not working with modal

[shadowgroundz]

If use modal with z-index, modal cannot appear when fullscreenmode

[svargas-dev]

I had this issue too – I got around it using react portals – supported in Material UI (Mui) and Chakra UI. The fullscreen API raises the fullscreen element to the maximum z-index level so the portal must be a child element of the fullscreen element or order to see it. I hope that helps.

[svargas-dev]

Actually, I ended up using another solution — using fscreen directly on the body element

[raulbarriga]

On another note, related to modals. I’m also using React portals with a custom modal which has a full screen button. My issue is that after I exit out of full screen and then exit the modal (which just sets it’s visible state to false), I find myself at the top of the webpage. For some reason, the full screen is doing this since exiting the modal without entering full screen just leaves me where I opened the modal. Any suggestions on how to fix this behavior?

[codebycarlos]

Thanks so much for that @svargas-dev. I went for your solution and it worked. Basically, I created a react provider component to initialise my own useFullScreenHandle function using fscreen and then that makes it available to be used across the app. I actually did the implementation almost exactly as react-fullscreen's (https://github.com/snakesilk/react-fullscreen/blob/master/src/index.tsx) - only difference as you suggest, setting the node to document.body. I think it's the only reliable way of doing it without messing up tooltips and modals. Would be handy for others maybe if it was included as part of this library?

[abhishekgowdak1997]

Hii guys ,I am also facing similar issue not getting Modal on fullscreen. I want to try using React portals approach can anyone share an example.

[Dilshan97]

I'm also face this issue. i found the solution for that. i'm using Javascript full screen API directly with the react.

const toggleFullSceen = (): void => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  };

 <button onClick={() => toggleFullSceen()}>
    Toggle full screen mode
 </button>