query element selector lazily

[victornpb]

Description

I'm trying to write a tour on a reactive app, so the elements doesn't exist until you go to that specific step.

Expected Behavior

What did you expect to happen?

only try to querySelector when the user goes to that step not on the start of the tour.

Actual Behavior

What actually happened?

It tries to find all selectors on the start of the tour.

Example (recommended)

How can someone else see/test this issue? List the steps or write some code; or create a jsfiddle or codepen.

    const intro = introJs();
    intro.setOptions({
      steps:[
        {
          intro: "Welcome!",
        },
        {
          intro: "Click here to do blah",
          element: '[data-tour="blah"]', //only querySelect it when this step is the current one
        },
        {
          intro: "Do this",
          element: '[data-tour="foo"]', //only querySelect it when this step is the current one
        },
        {
          intro: "Do that",
          element: '[data-tour="bar"]', //only querySelect it when this step is the current one
        },
      ],
    });
    intro.start();

Environment (optional)

intro.js version: latest npm version VueJS on webpack environment.

[Fakerhardcore]

I wrote a little workaround for this problem, maybe it helps someone:

introJs.onbeforechange(function(targetElement) {
      introJs._options.steps.forEach(function (step, key) {
        if(step.element){
          introJs._introItems[key].element = document.querySelector(step.element);
          introJs._introItems[key].position = step.position ? step.position : 'bottom';
        }
      });
    });

[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.