search

pulsardev / vue-tour

Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.
https://pulsardev.github.io/vue-tour
MIT License
2.4k stars 275 forks source link

If a step doesn't have a target, fails to display all subsequent steps #218

Open regexj opened 2 years ago

regexj commented 2 years ago

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:

  1. Create your steps array with 4 steps. For the 1st step don't provide a target. In the options set debug:true.
  2. 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.
  3. Change the order of the steps array and set step 3 as the one without a target.
  4. 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 image image

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.

Terrijoo commented 2 years ago

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.

simar7 commented 2 years ago

yes running into the same behaviour

dileep021 commented 1 year ago

any solutions?

patrickelectric commented 1 year ago

Same problem, appears to be related to #175 / #51

max-tet commented 1 year ago

I got the same problem. Is it possible that the step connot be destroyed properly because of the missing target element? This error seems to suggest something like that. image