Tour does not close on Route Transitions

[SilvaMtz]

Whether I type the URL directly or move through the app, the tour does not close. I have tried using willTransition, didTransition, deactivate, and many other Route Methods, something like this:
willTransition() { this.get('tour').cancel();
I have multiple tours on my app. When I move from one route to another with the tour open, it does not close and stacks with the other tour. And the previous tour cannot be close even manually until the page is refreshed.

[RobbieTheWagner]

Hello @SilvaMtz, can you please provide a reproduction of this or at least confirm your versions of Shepherd and ember-shepherd etc?

[SilvaMtz]

Upon changing routes, they begin stacking on top of the other. Unable to close the last one.
Sorry about the blurry elements, as I cannot provide any visual information regarding the application.

Shepherd v2.8.0
Ember-Sehpherd v4.9.0

This is the first screen with the active tour:

This is the second screen, the previous tour did not clean itself up.

[RobbieTheWagner]

@SilvaMtz so two things here:

1. Would using just one tour and replacing the steps not be okay?
2. What have you tried to cancel the tour before switching routes? If you could provide a reproduction, I could try to help you find a workaround.

[st-h]

@SilvaMtz I noticed that this is probably not desired behaviour as well, as I am using a separate tour for each route in my app. To work around it, I just cancel the current tour on the willTransition hook on the route.

actions: {
    willTransition: function() {
      if (this.tour.isActive) {
        this.tour.cancel();
      }
    }
  }

I have not encountered any issues with this so far. But if it does not work for you, I suggest to place a breakpoint in the willTransition hook and see if it gets called at all. If it does, what happens when tour.cancel() is called?

[RobbieTheWagner]

@SilvaMtz @st-h when I originally wrote this library, I did not intend for multiple tours. I always reused the same tour and changed the steps out. I also know there are people who want the tour to stay active across route transitions, so there are use cases for both cancelling and not.

That being said, we could probably make this configurable. We could build something in that utilizes the router service or router directly, whichever is easier, and check if(this.tour.isActive && this.tour.cancelOnTransition) and manually cancel the tour. Thoughts?

[st-h]

@rwwagner90 I personally think it is fine that the app controls when the tour will be hidden - as it currently is. But, as you mentioned, one could always add configurable convenience methods to handle something like that - but well, it is quite easy to add that behaviour in the actual app in case it is desired.

[RobbieTheWagner]

@st-h I agree, but I do want to make everything as easy as possible.