Skip a step if element in attachTo is not visible

[yonkov]

My tour got stuck when I attached an element that is hidden on mobile. For example, this could be a menu item from collapsed menu on mobile. I need a way to detect if element is hidden from the screen (opacity:0 or display: none, etc.) and if it is hidden, either detach the step from the element or skip the step. Is there a way to do it? I read about the beforeShowPromise but not sure how to implement it.

[yonkov]

I came up with the following logic. It seems to be working, though I am not sure it covers all the use cases:

            beforeShowPromise: () => new Promise((resolve) => {
                    const currentIndex = tour.steps.indexOf(tour.getCurrentStep());
                    let currentStep ='';
                    setTimeout(() => {
                        currentStep = tour.steps[currentIndex].el;
                        if (currentStep.hasAttribute('data-popper-reference-hidden')) {
                            tour.next();
                        }                
                    }, 100);
                    resolve();
            })

[chuckcarpenter]

@yonkov that looks like a good implementation. You could probably use getComputedStyle on the element as well to check opacity:0 or display: none, etc, as you'd mentioned. Either way, using that hook for custom functionality is what we'd recommend and not something we'd implement in the library directly.

[RobbieTheWagner]

@chuckcarpenter we do need a sane default for when the element is not found. Right now, we do not show the step, but we do show the modal, so the user is stuck, which feels like a bug.

[chuckcarpenter]

@rwwagner90 not sure because what is that? Does the tour fail or do we go to the next step? Do we need to add a hook in to override that behavior as well?

[RobbieTheWagner]

@chuckcarpenter we are discussing the issue here #1437 if you want to weigh in