Re-invoking the tour after completing it, does not show overlay.

[akmtagline]

🐛 Bug Report

I have a tour set up for multiple pages on my website. We also have a button to take a tour again by clicking it. I went through all of the steps and completed the tour. It works as expected with the overlay and the tooltip. Now, if I click the button to retake the tour, I can only see the tooltip and not the overlay.

I have a custom close icon on each step. I'm closing the tour by calling the skip function from the helpers. helpers.skip()

I am re-invoking the tour by calling the reset function with true as its first argument. helpers.reset(true)

To Reproduce

Steps to reproduce the behavior:

1. Start a tour.
2. Complete the tour by going through all of the steps or Skip the tour after 2 or 3 steps.
3. Try to invoke the tour again.
4. You will see the tooltip without overlay.

Expected behavior

It should show a tour with overlay same as the first tour.

[Nigui]

Same behavior here. Easy to reproduce on joyride-demo project : in controlled demo, disable beacon on first step, skip the tour then click restart button. Overlay is not rendered 🙁

[akmtagline]

@Nigui I also observed strange behavior with this issue in my project. I don't know how it works. But, if the overlay is not visible and your first step target is a body with the center placement, you can click on the restart button twice to activate the overlay.

[Nigui]

Hello @gilbarbara I think that I've found a solution for this issue.

if (changedFrom('lifecycle', LIFECYCLE.INIT, LIFECYCLE.READY))

Should contains LIFECYCLE.TOOLTIP in "from" state, like:

if (changedFrom('lifecycle', [LIFECYCLE.INIT,LIFECYCLE.TOOLTIP], LIFECYCLE.READY))

The reason of the bug is that setPopper is executed after being in TOOLTIP lifecycle state. So it gets back to READY state. Unfortunately, Overlay is not rendered when lifecycle state is not TOOLTIP.

I don't know if it's the best solution, but it seems to do the job.

Do you know how long it would take to integrate the fix? Thank you for this lib btw ;)

[akmtagline]

@Nigui @gilbarbara

I have found a workaround for this issue. This can help you identify and fix the issue.

Before, I was calling only the skip method to close the tour. const closeTour = () => helper.skip()

But, now if I also call the cleanupPoppers method, the tour works as expected on restart. You can access this method using ref. const closeTour = () => { helper.skip(); joyrideRef.current?.store?.cleanupPoppers(); }

Note: I have also used my custom footer button for "Done" and called the above function on the click of it.

[gilbarbara]

Hey @Nigui @akmtagline The popper.js initialization reverted the lifecycle to READY, so I added an extra condition to avoid it. I just opened a PR with this fix and a few others. I should merge it soon.

[Nigui]

@gilbarbara I've tested your fix in my project and it works perfectly. Thank you! Can't wait for the release 😀

[gilbarbara]

Released as 2.7.3 Thanks