Is it possible to disable keyboard navigation on advanceOn steps?

[iamsachin]

I am using the advanceOn to go to the next step. I didn't provide the next button, which is good. But the user is still able to go to next step using the keyboard.

[RobbieTheWagner]

@IamSachin I am not sure the best way to handle this. We want to enable it as much as we can for a11y. I suppose we could have a keyboardNavigation option, that could be set to false, but it might be nice to have something more robust, where keyboard nav and the next/previous buttons could be disabled until certain conditions are met.

[iamsachin]

Do you plan of having such a feature in the future?

where keyboard nav and the next/previous buttons could be disabled until certain conditions are met.

This would be really great actually. I am currently using the app on Vue based front end, and my advanceOn action is re-rendering many things in the page. Sometimes, the selectors are changing and the tour step is not rendering properly because it cannot find the item.

[iamsachin]

Do the steps look for anchor point using the document.querySelector at the time of showing step, or while use .addStep or .addSteps?

[RobbieTheWagner]

@IamSachin I really try to discourage the use of advanceOn I would like to remove that option in the future entirely. It's much more stable to call tour.next() when you want to advance. Would that work for you or do you need advanceOn?

[RobbieTheWagner]

Do the steps look for anchor point using the document.querySelector at the time of showing step, or while use .addStep or .addSteps?

It should be during the show call, not during addStep.

I am currently using the app on Vue based front end, and my advanceOn action is re-rendering many things in the page

I am very curious on this behavior. Do you have an example?

[iamsachin]

tour.next() does feel like a cleaner solution and better than advanceOn.

It should be during the show call, not during addStep.

This information will save me a lot of time. 👍

I am very curious on this behavior. Do you have an example?

I cannot show a screenshot here because of sensitive data. I'll try to create an example screen and show you.

[RobbieTheWagner]

I don't need a screenshot, but some example code showcasing the problem would be great 👍

[iamsachin]

        this.beforeShowPromise = () => {
          return new Promise(function(resolve) {
            setTimeout(() => {
              resolve();
            }, 1000);
          });
        };

For example, within this timeout, the element is being rendered in the DOM. Yet, I am not able to attachTo that newly rendered element. The step is showing after a second

However, if I am using the parent div in attachTo, it is selecting including the newly rendered child.

[RobbieTheWagner]

@IamSachin _show is not called until after the promise from beforeShowPromise resolves. What are you passing to attachTo? It should work. I think I really need a full example please. Can you make a CodePen or something?