-
-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
afterStep not working #49
Comments
Hey @Novando, which version of Thank you |
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,
},
} |
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 |
Hey @Novando I've been checking this issue for a couple of hours and I can confirm 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. |
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
|
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 ? |
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 ? |
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 Thanks again for investigating the issue! 🙌 |
🎉 This issue has been resolved in version 2.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Hey @Novando and @ChronicStone
|
Hi, I'm try to use this project in my app. I am using this docs to implement the feature. But when i want to save the onboarding progress to my server using
on: { afterStep: () => {}}
insteps
props, the code cannot be executed, but thebeforeStep
is working fine. Could you help me?The text was updated successfully, but these errors were encountered: