vue-tour
vue-tour copied to clipboard
If a step doesn't have a target, fails to display all subsequent steps
Describe the bug If you don't provide a target to a step it will load the tour box in the middle of the screen. This is perfect for a "welcome and take the tour" type UI box and I wish to take advantage of that. The only problem is that if you do this, the tour then fails to display every subsequent step after the one without a target. Very annoying.
To Reproduce Steps to reproduce the behavior:
- Create your steps array with 4 steps. For the 1st step don't provide a target. In the options set debug:true.
- Run your tour with your console up. The first step will load in the middle of the screen, when you press next nothing else will load. You can use the keyboard navigation to continue through the tour, which will be seen with the debug log, but the boxes won't appear.
- Change the order of the steps array and set step 3 as the one without a target.
- Run through the tour again. It will work as expected till step 3, then after that it won't display step 4.
Expected behavior To continue the tour and correctly display the tour box targeting the relevant element.
Screenshots
Additional context Viewing the screenshots above you can see in the second one via the debug log that it correctly finds the target element. It just somehow doesn't display the tour box.
I'm facing the same issue.
Also interesting is, if you have a setup like this:
[ { target: '.available-target', content: 'Some content' }, { content: 'Some other content' }, { target: '.available-target', content: 'Some more content' } ]
The first step works fine, showing the popper on the .available-target. The second step also works fine, showing the popper centered. If you now either go back or go forwards, the popper won't show up anymore, so the sticky box doesn't only break anything ahead in steps, but also previous steps if you go back.
yes running into the same behaviour
any solutions?