Conflict between multiple driver instances on the same page with distinct configurations

[Merci Jacob]

I'm encountering an issue while attempting to create two separate driver instances on a single page, each with its unique configuration set. However, it seems that the settings for the second instance are overwriting those of the first one.

For instance, if I create the first instance with config such as overlayColor: red, animate: true, the second instance with overlayColor: blue, animate: false. Both instances use overlayColor: blue, animate: false instead of the configs I passed to each one of them.

Is there any recommended approach or workaround to ensure that each driver instance maintains its unique configurations without interfering with others?

[chawkichalladia]

did you find a solution to this ?

[Merci Jacob]

did you find a solution to this ?

A solution to this is to always initialize the driver inside the eventListener callback.
Instead of this:

const driver1 = driver({
  steps: [
    {
      element: '#counter',
      popover: {
        title: "Welcome to the tour",
        description: "Welcome to the tour",
        align: 'end',
        side: 'bottom'
      }
    },
    {
      element: '.icon-toggle-right',
      popover: {
        title: "Welcome to the second tour",
        description: "Holla la tour",
        align: 'end',
        side: 'left'
      }
    }
  ]
});

const driver2 = driver({
  overlayColor: 'yellow',
  overlayOpacity: 0.2,
  steps: [
    {
      element: "#vite-logo",
      popover: {
        title: "Here is Vite",
        description: "A tool for building web applications",
      }
    },
    {
      element: ".vanilla",
      popover: {
        title: "Here is JavaScript",
        description: "A programming language for the web",
      }
    }
  ]
});

document.querySelector('#tour').addEventListener('click', () => {
  driver2.drive();
});

driver1.drive();

Do this:

const driver1 = driver({
  steps: [
    {
      element: '#counter',
      popover: {
        title: "Welcome to the tour",
        description: "Welcome to the tour",
        align: 'end',
        side: 'bottom'
      }
    },
    {
      element: '.icon-toggle-right',
      popover: {
        title: "Welcome to the second tour",
        description: "Holla la tour",
        align: 'end',
        side: 'left'
      }
    }
  ]
});


document.querySelector('#tour').addEventListener('click', () => {
  const driver2 = driver({
    overlayColor: 'yellow',
    overlayOpacity: 0.2,
    steps: [
      {
        element: "#vite-logo",
        popover: {
          title: "Here is Vite",
          description: "A tool for building web applications",
        }
      },
      {
        element: ".vanilla",
        popover: {
          title: "Here is JavaScript",
          description: "A programming language for the web",
        }
      }
    ]
  });
  driver2.drive();
});

driver1.drive();

This way the driver2 object doesn't overwrite the first one. I think this is worth mentioning somewhere in the documentation.

[chawkichalladia]

I actually used the setConfig instead of initializing a new driver. I had a global driver and a bunch of configs that I set whenever I need them.

[Merci Jacob]

I actually used the setConfig instead of initializing a new driver. I had a global driver and a bunch of configs that I set whenever I need them.

Do you get the ability to call driver's methods individually(per config)?

[chawkichalladia]

Do you get the ability to call driver's methods individually(per config)?

I'm not following. I just call the functions from the driver() instance after I set the config. so far I haven't faced any issues with that. is this what you meant ?

[Merci Jacob]

Do you get the ability to call driver's methods individually(per config)?

I'm not following. I just call the functions from the driver() instance after I set the config. so far I haven't faced any issues with that. is this what you meant ?

Oh I see, by invoking the functions from driver() after setting the config, the newly set configuration takes precedence over the previous ones. Then what you're suggesting is an alternative way to achieve the desired result.

[chawkichalladia]

what I suggested was the only way I found that worked for my situation. but depending on the use case, it can be an alternate implementation.