search

gilbarbara / react-joyride

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

Dynamically adding components causes Joyride to lose target focus #927

Closed rnevius closed 10 months ago

rnevius commented 11 months ago

🐛 Bug Report

Occasionally, components are dynamically injected into the page when asynchronous API calls finish. If Joyride renders/starts before these are injected, the position of the "spotlight" is incorrect. Perhaps this is an implementation issue, but I didn't see anything about it in the docs.

To Reproduce / Example

https://codesandbox.io/s/heuristic-artem-lsnp2v?file=%2Fsrc%2FApp.js

Edit: Link updated

Expected behavior

When the App component is rendered with the new sticky header, the spotlight position should be recalculated. In this example, setTimeout is triggering the change, but in the real world it would usually be an API response.

gilbarbara commented 11 months ago

Hey @rnevius

This package assumes that your render tree is stable. Adding some sort of observability could impact performance, which I don't think this package should handle. You could add a key that changes when it needs to recalculate its position or just wait for everything to be rendered before starting it.