Stop it from dissapearing if it cant find element

[sdraper69]

First off, great library, it does everything I want and it's pretty easy to use. Far better than others I tried before finding shepherd (your demo actually originally put me off due to its styling).

I have elements hidden in an off-canvas that appear when a button is clicked. So it is visually appealing the off-canvas div slides in (transition: transform 0.3s ease-out). I also have elements that are created on the fly.

This means shepherd cant attach to the element.

Some of my situations I can get around using a beforeShowPromise, and I am currently seeing how to put a delay in (any guidance is appreciated) but to cover all situations I would also like it not to just "fail" when it cant attach. I feel the fact that the whole tour just ends when it can't find an element can really damage the user experience.

I can see 3 options if it fails to attach (though I'm sure there's more)

1. Just go in the centre unattached to anything
2. Try to show again after x seconds
3. Go back to the previous step

If anyone could point me in the right direction I would appreciate it.

Thanks

[RobbieTheWagner]

@sdraper69 beforeShowPromise should work for your use case. You can wait for your element to exist there, and then continue.

[sdraper69]

thanks, @rwwagner90 . I got round the use case above by putting in a delay as you suggested thanks.

However, due to the nature of my GUI the user can still do things that cause elements not to be visible (e.g. they change a tab). Of course, I can try to block behaviour with overlays, force things to show in the before show promise etc, however, it's impossible to catch them all.

The problem arises if using the overlay, the step may not show because it can't attach, but then the screen is greyed out and they can't click anything, effectively locking them out of the page. How do other people handle this? I feel that at the very least if it can't attach it shouldn't put the overlay on?

You can see the behaviour I mean on the shepherd home page. Start the demo, stay on step 1. Then using chrome tools, put a display :none on the Div that the second step would attach to (it doesn't have an id but its classes are "flex justify-center w-full"). then click next step - you will see you're stuck and "locked out" of the page.

I appreciate this is not a failing of Shepherd, but id like to hear how people handle such situations, and I think there should e some built-in behaviour to avoid the "locking" of a page.

A thought I did have, can I tell if it failed? Could I then activate the previous step, and if that fails go to the previous step etc, meaning the tour will go back until it finds a step it can show?

[RobbieTheWagner]

@sdraper69 ah, I see your point. I think we probably need some logic to say if the element was not found, skip the call to _setupModal.

I am not sure what the best default behavior would be for this case. I could see some people preferring it to just center it, but others may want it to wait for the element to exist or end the tour entirely or even throw a warning to the user etc.

[sdraper69]

I think giving users options would be the best. Perhaps be able to specify an onFail event for steps, where you can choose to centre, close, wait and try again(with a time out/# of attempts) or pass a custom function.

[sdraper69]

For me personally, I would like it to go back until it finds a step it can attach to. Amongst other things, this would help me when restarting a tour (e.g. the user has exited and come back in - they could have exited in a situation that requires 5 previous steps to get to).

Is there a way I can intercept/detect when it fails to attach?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sdraper69]

It's a shame this has never gotten any traction as I thought it would be quite a common occurrence, especially if people use media queries to hide things on mobiles etc. Is there anything that can be done to reopen this and push it along?

[RobbieTheWagner]

@sdraper69 the attachTo element now can take a function, which might support more complex use cases. Have you given that a try?

[sdraper69]

Thanks for the suggestion, what version was that added in? Whilst I think I can probably work with that, e.g. if nothing is returned I could turn the overlay off, but then I will have to always set the overlay to on in the next step. I still think there could be a better/global way to handle this default behavior that essentially locks the user out

[RobbieTheWagner]

@sdraper69 I am not sure, would have to check the changelog, but it's been relatively recently. The main idea here, is as the developer of your app, you need to be able to control this and wait for the elements to exist before showing the tour step. beforeShowPromise was the best option before, but now with attachTo.element taking a function, it can be used similarly.

[sdraper69]

I think it's the fact that the default behavior can literally lock the user out which I find to be the issue. I appreciate it's my job to ensure elements are there, but it's an easy thing to miss/go wrong and completely preventing any further interaction with the page because the overlay is in the way and seems like it should not be the default to me. I can't imagine a situation where someone would want the overlay but no message, so it just shouldn't be able to do that (or at least not be easy to do that).

Anyway, thanks for the suggestion, it will take some time for me to get round to testing the new attachTo but it should help.