Steps attaching to previous step's element

[mikeashelby]

Hi,

I'm trying to get v-onboarding working, and I've come across a strange issue. When I start the onboarding, it looks fine, but when I click 'next' the next step appears correctly, but still attached to the same element as the first step. However, when I click previous, now the first step appears, but now attached to the element for the second step.

Click start (should be attached to test this, which it is):

click next (should be attached to test that, which it isn't):

click previous (should be attached to test this, which it isn't):

It seems to me that the attachment is happening before the step is updated, or something similar...

Here's the relevant HTML:

            <!-- Add the Onboarding -->
            <div id="onboarding">
                    <on-boarding></on-boarding>
                <div id="testa">test this</div>
                <div id="testb">test that</div>
            </div>

And here's my whole OnBoarding Vue component:

<template>
  <div>

    <VOnboardingWrapper ref="wrapper" :steps="steps">
      <template #default="{ previous, next, step,exit, isFirst, isLast, index }">
        <VOnboardingStep>
          <div class="bg-white shadow-lg sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="sm:flex sm:items-center sm:justify-between">
                <div v-if="step.content">
                  <h3 v-if="step.content.title" class="text-lg font-medium leading-6 text-gray-900">{{ step.content.title }}</h3><i @click="exit" class="cursor-pointer mt-icon-closewindow" />
                  <div v-if="step.content.description" class="mt-2 max-w-xl text-sm text-gray-500">
                    <p>{{ step.content.description }}</p>
                  </div>
                </div>
                <div class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative">
                  <span class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs">{{ `${index + 1}/${steps.length}` }}</span>
                  <template v-if="!isFirst">
                    <button @click="previous" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-cgSecondary px-4 py-2 font-medium text-white hover:brightness-75 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm">Previous</button>
                  </template>
                  <button @click="next" type="button" class="inline-flex items-center rounded-md border border-transparent bg-cgPrimary px-4 py-2 font-medium text-white shadow-sm hover:brightness-75 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm">{{ isLast ? 'Finish' : 'Next' }}</button>

                </div>
              </div>
            </div>
          </div>
        </VOnboardingStep>
      </template>
    </VOnboardingWrapper>
    <span id="foo">Howdy, My Friend!</span>
    <button id="bar">Click me for no reason</button>
    <button @click="() => goToStep(1)">Click to go second step</button>
    <div>
      <button @click="start">Start Onboarding</button>
      <button @click="finish">Finish Onboarding</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
export default defineComponent ({
  components: {
    VOnboardingWrapper,
    VOnboardingStep
  },
  setup() {
    const wrapper = ref(null)
    const { start, goToStep, finish } = useVOnboarding(wrapper)
    const steps = [
    {
        attachTo: { element: '#testa' },
        content: { title: "Step1!"
          // description: "This is a quick tutorial to help you get started with creating your own website."
        },
        options: {
          scrollToStep: {
          enabled: false,
          options: {
            behavior: 'smooth',
            block: 'start',
            inline: 'start'
          }
        }
        }
      },
      {
        attachTo: { element: '#testb' },
        content: { title: "Step 2",
          // description: "You can choose from a variety of templates to get started with your website."
        },
        options: {
          scrollToStep: {
          enabled: false,
          options: {
            behavior: 'smooth',
            block: 'start',
            inline: 'start'
          }
        }
        }
      }
    ]

    // onMounted(() => {
    //   console.log("thiss")
    //   finish()
    //   start()
    // })

    return {
      wrapper,
      steps,
      start,
      finish,
      goToStep
    }
  }
})
</script>
<style>
[data-v-onboarding-wrapper] [data-popper-arrow]::before {
  content: '';
  background: var(--v-onboarding-step-arrow-background, white);
  top: 0;
  left: 0;
  transition: transform 0.2s ease-out,visibility 0.2s ease-out;
  visibility: visible;
  transform: translateX(0px) rotate(45deg);
  transform-origin: center;
  width: var(--v-onboarding-step-arrow-size, 10px);
  height: var(--v-onboarding-step-arrow-size, 10px);
  position: absolute;
  z-index: -2;

}

[data-v-onboarding-wrapper] [data-popper-placement^='top'] > [data-popper-arrow] {
  bottom: 5px;
}

[data-v-onboarding-wrapper] [data-popper-placement^='right'] > [data-popper-arrow] {
  left: -4px;
}

[data-v-onboarding-wrapper] [data-popper-placement^='bottom'] > [data-popper-arrow] {
  top: -4px;
}

[data-v-onboarding-wrapper] [data-popper-placement^='left'] > [data-popper-arrow] {
  right: -4px;
}
:root {
  --v-onboarding-overlay-z: 40;
}

:root {
  --v-onboarding-step-z: 50;
}
</style>

[or2e]

Same problem

[or2e]

@fatihsolhan

I'm sorry, here is the link where the problem is reproduced.

in version 2.2.1 everything works fine!

Thank you for your work!

I will try to figure out what's wrong

[ggueyraud]

@or2e In my case the two latest versions doesn't works.

Here a basic fork of the demo with the latest version : https://stackblitz.com/edit/vue-j394ja?file=public/index.html

[github-actions[bot]]

:tada: This issue has been resolved in version 2.3.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[fatihsolhan]

Hello everyone,

I wanted to thank you for bringing this issue to my attention. I apologize for any inconvenience this issue may have caused. It took some time to fix, as I was on military service duty, but I'm happy to say that the issue has been resolved.

The problem was related to the step not getting attached to the correct element, but I've released a fix that should solve this issue. If you're still experiencing any problems, please let me know and I'll be happy to help.

Thank you again for your patience and understanding.