Tour skips steps but doesn't increment count

[SethRedwine]

Describe the bug

Hi, super module you've got set up here. I encountered a small issue while I was using it though. When the tour encounters a step that's supposed to be on an element that's hidden (ngIf'ed in my case) it seems to skip the step like I'd expect, however it doesn't increment the count that it's using to keep track of the steps. The tour continues on just fine but when I get to the last step in the tour, I encounter a 'Next' button instead of a 'Done' button (I'm assuming because of the count?) and clicking 'Next' covers the page in a scrim with no tour step, necessitating a refresh.

I've done some checking to just call JoyrideService.closeTour() you recently added to the next attribute of my last step, but it seems like something that should also be checked and handled in the framework itself.

To Reproduce
Steps to reproduce the behavior:

1. Set up a tour with several steps
2. Hide some of the elements pointed to in some steps
3. Continue the tour to completion.

Expected behavior

A clean exit on the last tour step passed in the startTour() call.

Screenshots

Last step with incorrect step position:

After clicking next without manually calling closeTour():

Details (please complete the following information):

• Browser: Google Chrome | 72.0.3626.96 (Official Build) (32-bit)
• Dependencies:
  "@angular-mdc/web": "^0.43.7",
  "@angular/animations": "~7.2.0",
  "@angular/cdk": "^7.3.1",
  "@angular/common": "~7.2.0",
  "@angular/compiler": "~7.2.0",
  "@angular/core": "~7.2.0",
  "@angular/forms": "~7.2.0",
  "@angular/http": "^7.2.3",
  "@angular/material": "^7.3.2",
  "@angular/platform-browser": "~7.2.0",
  "@angular/platform-browser-dynamic": "~7.2.0",
  "@angular/router": "~7.2.0",
  "@ngxs/logger-plugin": "^3.3.4",
  "@ngxs/storage-plugin": "^3.3.4",
  "@ngxs/store": "^3.3.4",
  "core-js": "^2.5.4",
  "ng2-nouislider": "^1.7.13",
  "ngx-joyride": "^2.2.6",
  "nouislider": "^13.1.0",
  "rxjs": "~6.3.3",
  "tslib": "^1.9.0",
  "zone.js": "~0.8.26"

[tnicola]

Hi @SethRedwine ,

Thank you for the detailed description. I think I've understood what's your issue here, the problem is that the tour is not able to find the target and then it fails causing the wrong behaviour you're facing, since this is not an expected case by the tour itself.

Workaround: If a target step is hidden by a *ngIf and you want to see it anyway, you can use the next, prev events (listen-for-events) to do some actions in order to get the element visible.

I have a question, just to undestand better: if you don't want to see some steps and you already know that these elements are going to be hidden for sure in the DOM, why are you adding them in the step list?

P.S.: I will fix this with your suggestion, to make the tour stronger.

[SethRedwine]

To be fair, I only encountered this issue because of a design flaw on my part. I'm relying on successful data calls to populate some areas of my interface instead of providing mocked data to ensure they'll be there. I think this should probably only be come across if people are doing things a little fast and loose like I am. I just thought it'd (hopefully) be an easy way to make the tour a little more graceful though.

Also, thank you for your lightning quick response!

[tnicola]

With the new release (2.2.8) the tour handles all the cases in which a step is missing. It also logs whenever it doesn't find a target, skipping automatically.