search

snakesilk / react-fullscreen

Fullscreen helper component for React.
https://www.npmjs.com/package/react-full-screen
MIT License
280 stars 33 forks source link

Not working with modal #63

Open shadowgroundz opened 3 years ago

shadowgroundz commented 3 years ago

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

svargas-dev commented 3 years ago

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 commented 3 years ago

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

raulbarriga commented 3 years ago

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 commented 2 years ago

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 commented 1 year ago

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.