search

gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.62k stars 519 forks source link

Steps are not positioned correctly if target is in an iframe #1037

Closed dunklesToast closed 1 month ago

dunklesToast commented 1 month ago

🐛 Bug Report

I have a usecase where I want to highlight elements inside an iframe that i control. For some reason joyride cannot position the elements correctly and also fails with an error (but renders anyway). For me it seems that it does not take the offset position of the frame in account?

To Reproduce

Code Sandbox can be found here: https://codesandbox.io/p/sandbox/react-joyride-iframe-94kqfw Don't mind the setTimeout(), thats just so the iframe can be rendered and the element exists when adding the step - ofc this can be done with a Mutation Observer but for the sake of simplicity I went with the setTimeout. When you open the Sandbox it should show Steps: 2 at the bottom, if not, please reload the preview. The first step will be rendered correctly and works as expected but the second step, even though I pass an HTMLElement (which should be supported?) it throws an error and positions it invalid.

Expected behavior

The Spotlight should be positioned correctly no matter if the target element is inside or outside the iframe. if the iframe element has an offset it should also take into account for that imo.

Link to repl or repo (highly encouraged)

https://codesandbox.io/p/sandbox/react-joyride-iframe-94kqfw

Run npx envinfo --system --binaries --npmPackages react-joyride

Doesn't work in the CSB but I assume you can get the necessary info from the Sandbox?

gilbarbara commented 1 month ago

Hey @dunklesToast

Yeah, iframes aren't supported. You are the second person to bring it up in 7 years, and I think it will require a lot of code to support iframes properly, which I'm not willing to work on.

Anyway, feel free to fork the repo and work on it. If the changes aren't super complex, maybe I could merge them, but I don't promise anything. You could always publish your version or use it directly from GitHub by removing the build directory from the gitignore file.

dunklesToast commented 1 month ago

hey @gilbarbara, totally understandable and i already thought it's quite complex, just wanted to make sure i don't overlook anything. Thanks for your effort anyway and if i find a way to support them easily, i'll create a pr.