When user presses back button on the browser - backdrop still exists however tooltip isn't shown

[hakimio]

When user presses back button on the browser - backdrop still exists however tooltip isn't shown

[hakimio]

Ok, I think I understand what's the problem. It shouldn't even start listening to NavigationStart event if it didn't navigate anywhere (isRouteActive == true).

[hakimio]

Not sure if it's more sensible to try to guess which step should be selected or to just end the tour. I am leaning towards just ending the tour since there might no longer be an anchor element or the step might require pressing UI element which might cause issues when pressed multiple times.

[mivanyna]

Maybe some kind of confirmation modal in this case?
Or an option for what to do in such cases?

Btw, a similar issue is when no backdrop is shown and fragment is changed - tooltip disappears, but tourService status - on

[mivanyna]

Btw, a similar issue is when no backdrop is shown and fragment is changed - tooltip disappears, but tourService status - on

@hakimio, What do you think if adding a check into setCurrentStep function to only hide the step if url is not active or anchor isn't available:

private setCurrentStep(step: T): void {
        this.currentStep = step;
        this.showStep(this.currentStep);
        this.router.events
            .pipe(filter(event => event instanceof NavigationStart), first())
            .subscribe(() => {
                if (this.currentStep && this.currentStep.hasOwnProperty('route') && (!this.isActiveRoute(step) || !this.anchors[step.anchorId])) {
                    this.hideStep(this.currentStep);
                }
            });
    }

private isActiveRoute(step: T) {
        if (!step.route) {
            return true
        }

        const url = typeof step.route === 'string' ? step.route : this.router.createUrlTree(step.route),
          matchOptions: IsActiveMatchOptions = {
              paths: 'exact',
              matrixParams: 'exact',
              queryParams: 'subset',
              fragment: 'ignored'
          };

        return this.router.isActive(url, matchOptions);
    }

[hakimio]

Not sure what you are trying to achieve here.
Anyway, I have decided to just end the tour if user navigates to a different page.
You can use route guard to prevent user from being able to navigate to a different page when tour is active.

[mivanyna]

Example: Tooltip is shown on the left menu and the user switches tabs on the right side (fragment only changes in url - someUrl#tab1 => someUrl#tab2)

[mivanyna]

One more thing I noticed is that there are subscriptions to this.router.events in setCurrentStep and no unsubscribe.
It seems that with time and going back and forward between steps may cause lots of subscriptions that would be attached and stay there forever. Even when the tour is finished.

[hakimio]

It's using first() operator to unsubscribe after the first emition.