Pressing Done button does not finish the tour

[halkony]

Pressing the Done button at the end of my tour produces an obtuse error and does nothing. The skip functionality works as expected when its enabled.

I'm running a vitesse starter template. It seems like I could fix this by adjusting something my steps.

My component

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <VTour
    ref="tour"
    :steps="steps"
    :margin="32"
    hideArrow
    noScroll
    highlight
    autoStart
    backdrop
    hideSkip
  />
  <div class="flex flex-col gap-4">
    <ProgressIndicator data-step="1" />
    <div data-step="2" class="flex gap-2 flex-col items-center">
      <CrossButton />
      <div class="flex gap-2">
        <CrossButton /><CrossButton /><CrossButton />
      </div>
      <CrossButton /><CrossButton />
    </div>
    <Button data-step="3" label="Refresh Puzzle" />
  </div>
</template>

<script setup lang="ts">
import { VTour } from "@globalhive/vuejs-tour";
import "@globalhive/vuejs-tour/dist/style.css";
import CrossButton from "@/components/puzzle/CrossButton.vue";

const tour = templateRef("tour");
onMounted(() => {
  tour.value.resetTour();
  tour.value.startTour();
});

const steps = [
  {
    target: "[data-step='1']",
    content: "This is the first step",
  },
  {
    target: "[data-step='2']",
    content: "This is the second step",
  },
  {
    target: "[data-step='3']",
    content: "This is the third step",
  },
];
</script>

Browser Console

Uncaught (in promise) TypeError: e.steps[o] is undefined
    u vuejs-tour.js:87
    v vuejs-tour.js:66
    setup/</</n[2]< vuejs-tour.js:163
    cacheKey runtime-dom.esm-bundler.js:1695
    callWithErrorHandling runtime-core.esm-bundler.js:199
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:206
    invoker runtime-dom.esm-bundler.js:722
    addEventListener runtime-dom.esm-bundler.js:673
    patchEvent runtime-dom.esm-bundler.js:691
    patchProp runtime-dom.esm-bundler.js:768
    mountElement runtime-core.esm-bundler.js:4836
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    processFragment runtime-core.esm-bundler.js:5075
    patch runtime-core.esm-bundler.js:4637
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    processFragment runtime-core.esm-bundler.js:5075
    patch runtime-core.esm-bundler.js:4637
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    mountChildren runtime-core.esm-bundler.js:4895
    processFragment runtime-core.esm-bundler.js:5075
    patch runtime-core.esm-bundler.js:4637
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    patchBlockChildren runtime-core.esm-bundler.js:5017
    processFragment runtime-core.esm-bundler.js:5093
    patch runtime-core.esm-bundler.js:4637
    componentUpdateFn runtime-core.esm-bundler.js:5369
    run reactivity.esm-bundler.js:222
    runIfDirty reactivity.esm-bundler.js:260
    callWithErrorHandling runtime-core.esm-bundler.js:199
    flushJobs runtime-core.esm-bundler.js:408
    promise callback*queueFlush runtime-core.esm-bundler.js:322
    queuePostFlushCb runtime-core.esm-bundler.js:336
    queueEffectWithSuspense runtime-core.esm-bundler.js:7284
    componentUpdateFn runtime-core.esm-bundler.js:5304
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    render2 runtime-core.esm-bundler.js:5942
    mount runtime-core.esm-bundler.js:3904
    mount runtime-dom.esm-bundler.js:1757
    ViteSSG index.mjs:79
    ViteSSG index.mjs:80
    <anonymous> main.ts:11
vuejs-tour.js:87:6

[halkony]

Downgrading to 2.3.0 fixed this issue, so it seems to be a recently breaking change.

[halkony]

This is a separate issue, but there was also a breaking change introduced in 2.2.0 where highlighted elements were absolutely positioned on the screen and wouldn't move with the element during a scroll. 2.1.1 seems to be the last stable version for my needs.

[GlobalHive]

Hey @halkony, Thanks for this issue.

For the scrolling part: Yes the backdrop is an absolute element which gets masked to the element, creating the "brightness effect"

But I will try to reproduce your issue asap.

Best Regards, Sascha

[GlobalHive]

Hey @halkony,

Let's address each issue step by step:

1. Highlighted Elements and Scrolling

• Issue: "Highlighted elements were absolutely positioned on the screen and wouldn't move with the element during a scroll."
• Explanation:
  • The highlight (blue ring around your elements) is relative positioned, so it moves with the element during scrolling.
  • The backdrop (the darker area) is fixed positioned, so it does not scroll with the page.
  • The backdrop is essentially a div spanning the entire page with a shape cut out, making the element appear brighter.
  • Allowing the backdrop to scroll would require recalculating its position during scrolling, which would significantly hurt performance.
• Additional Note:
  • If you want your users to scroll, it is not recommended to use the backdrop prop.

---

2. "Done" Button Error

• Issue: "Pressing the Done button at the end of my tour produces an obtuse error and does nothing."
• Explanation:
  • True. This happend because the last step is "missing", so there is no onBefore event to trigger when done.
• Resolution:
  • This issue has been fixed in version 2.3.3.

---

3. Tip: Using autoStart

• If you use the autoStart prop, you don't need to manually call tour.value.startTour() in your code.
  The tour will automatically start.

---

Let me know if you have any further questions or issues!