afterStep not working

[Novando]

afterStep not working

[fatihsolhan]

Hey @Novando, which version of v-onboarding you are using? Are you using custom UI or default UI?
Please provide as much as context you can so I can understand the issue better

Thank you

[Novando]

I am using v2.1.0 only on custom UI. Also I am using Bootstrap v5.2.2 and PopperJs v2.11.6. Here's the code

<div class="mt-28">
    <VOnboardingWrapper ref="onboarding" :steps="steps" :options="options">
      <template #default="{ previous, next, step, exit, isFirst, isLast, index }">
        <VOnboardingStep>
          <section class="bg-black rounded-3 text-white w-280px px-16 pt-16 pb-8">
            <div class="mb-16">
              <div class="d-flex justify-content-between">
                <p class="fw-bold">{{ step.content.title }}</p>
                <i @click="exit" class="cursor-pointer mt-icon-closewindow" />
              </div>
              <p>{{ step.content.description }}</p>
            </div>
            <div class="d-flex justify-content-between fw-bold">
              <div>
                <p class="cursor-pointer" v-if="!isFirst" @click="previous">Back</p>
              </div>
              <div>
                <p class="cursor-pointer text-primary" @click="next">{{isLast ? step.options.labels.finishButton : 'Next'}}</p>
              </div>
            </div>
          </section>
        </VOnboardingStep>
      </template>
    </VOnboardingWrapper>
  </div>

and here comes the javascript

  import { ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
  
  const onboarding = ref(null)
  const route = useRoute()
  const { start } = useVOnboarding(onboarding)

  onMounted(() => {
    start()
  })
  
  const steps = 
  {
    attachTo: { element: '#connections-menu'},
    content: {
      title: "Connections,",
      description: "Lorem ipsum dolor sit amet",
    },
    options: {
      labels: {
        finishButton: 'Next: Sources',
      }
    },
    on: {
      beforeStep: function() {
        console.log('beforeStep Dashboard') // this is working
      },
      afterStep: function() {
        console.log('afterStep Dashboard') // this is not working
      }
    }
  },

  // v-onboarding custom configuration, refer to https://v-onboarding-docs.fatihsolhan.com/props/options
  const options = {
    popper : {
      placement: 'bottom-start',
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 20],
          },
        },
        {
          name: 'arrow',
          options: {
            padding: {
              right: 250,
            }
          },
        },
      ],
    },
    overlay: {
      enabled: false,
    },
  }

[fatihsolhan]

Hi @Novando, having a super busy week so I couldn't get back here, sorry.

I'll try to reproduce this issue and get back to you as soon as possible

[fatihsolhan]

Hey @Novando I've been checking this issue for a couple of hours and I can confirm afterStep doesn't work sometimes

Because although it doesn't work on the codesandbox that I created, it works successfully on my local. I'll try to find the bug asap and let you know.

[Novando]

Thanks for your reply, I eager to wait for your next update

…

On Sun, Nov 13, 2022 at 6:45 PM Fatih Solhan ***@***.***> wrote: Hey @Novando <https://github.com/Novando> I've been checking this issue for a couple of hours and I can confirm afterStep doesn't work *sometimes* Because although it doesn't work on the codesandbox that I created, it works successfully on my local. I'll try to find the bug asap and let you know. — Reply to this email directly, view it on GitHub <#49 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE42UFY64LWF4EP4KG2IBGLWIDIFZANCNFSM6AAAAAARU3IJHQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Best Regrards Rizky Novando. P

[ChronicStone]

Hi @Novando, did you somehow find a solution to this issue ?

afterStep is also not triggering in my end. For now I'm using the prev / next step beforeStep method to do the setup, but it causes some issues since the DOM element I want to showcase isn't necessarly fully ready at the moment the step triggers.

@fatihsolhan Is there something I can do to help getting this fixed ?

[ChronicStone]

Hi @fatihsolhan, after a bit of investigation, I found the issue, it applies only to custom UI onboarding.

The afterStep method is called internally by the VOnboardingStep component, on call of onNext method, but on custom UI it's the wrapper that just calls setStep method, thus afterStep never fires.

I think to standardize behaviour between custom UI & standard UI, the slot props should be moved from the wrapper to the step component, this way custom & standard UI will get the same behaviour.

On an other note, got a small question : Is there a reason you made the afterStep not async ?

[fatihsolhan]

Hey, @ChronicStone thank you so much for the investigation. Yes, it happens because of differences between custom UI and default UI. I knew I'd have to refactor that part at some point. I have been a bit busy for a long time and it's going to continue like that but I'll do my best to refactor that part and fix those behavioral differences. In the meantime, you are free to open up a PR about that issue, it would help me a lot :)

I don't remember the exact reason why I didn't make afterStep async. I'll look into that as well when I have time. It might be easier to do with the upcoming refactor.

Thanks again for investigating the issue! 🙌

[github-actions]

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[fatihsolhan]

Hey @Novando and @ChronicStone

afterStep should work as expected right now. It can be an async function as well.
I also created tests to make sure they are working correctly.