Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
regexj opened this issue Feb 4, 2022 · 5 comments
Open
Assignees
Labels
bug Something isn't working

Comments

@regexj
Copy link

regexj commented Feb 4, 2022

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
Copy link

Terrijoo commented Feb 8, 2022

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.

@HZooly HZooly added the bug Something isn't working label Feb 16, 2022
@simar7
Copy link

simar7 commented Aug 3, 2022

yes running into the same behaviour

@dileep021
Copy link

any solutions?

@patrickelectric
Copy link

patrickelectric commented Jan 5, 2023

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

@max-tet
Copy link

max-tet commented Jan 8, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

8 participants