Stepper Destroy Not Working Properly
I have a stepper with one step, this step asks the user what they want to do, when they select an option is step 1, I do the following
1. destroy the stepper
2. load new steps from 2 onwards depending on what step 1 was
3. initialize the stepper with the new steps
The bug/problem is, that when I destroy the stepper and re-init, the stepper.on("kt.stepper.next" ....
function fires twice, as the destroy is not removing the original event listeners for these events.
There is no stepper.off() method and event settings stepper = null before re-init does not work.
How can I achieve this dynamic steps type functionality??
Replies (9)
Hey Jason, I had a similar problem .. was setting up a multi-choice scenario that would change the following steps in a wizard.
My workaround was keeping the same stepper, but using jquery add/remove classes (and toggle), to hide elements in the future steps.
This workaround was good for me as I'm not using the stepper validation scripts, and I'm not using the stepper as an overall form. I've built it as a a wizard that guides the user through multiple separate forms (ie. creating a UX process flow for multiple separate forms).
Not sure if that helps per se, but I have also been finding the stepper is more of an experience than a custom form.
Could you please provide us with more info? What is your Metronic version and framework(React, Angular, Vue, or HTML)?
Version 8 in plain HTML and JS.
Hi,
Thanks for reporting this bug.
Please try to use this updated version of KTStepper and recompile your assets.
Now can use the destroy method and recreate a new instance of KTStepper. You can handle the step index by resetting any step index you need using getCurrentStepIndex() and goTo() API methods as explained in the documentation
Could you please confirm if this works for you ?
Regards,
Hi
Updated stepper.js and rebuilt.
Can confirm that new destroy() code is being executed.
It still does not work correctly though.
Here’s are console.log of event with notes to explain.
initStepper : stepper1166125124798 // init stepper with only one step showing options user can choose
destroyStepper : stepper1166125124798 // user clicked option and additional steps for option where loaded, so destroy stepper and reinitialise with new steps
initStepper : stepper1418468924865 // initialise stepper with full list of steps
kt.stepper.next : stepper1418468924865 // user clicked next
kt.stepper.changed : stepper1418468924865 // stepper changed to step 2
kt.stepper.previous : stepper1418468924865 // user clicked back
kt.stepper.changed : stepper1418468924865 // stepper changed back to step 1
destroyStepper : stepper1418468924865 // user clicked a different option and additional steps for option where loaded, so destroy stepper and reinitialise with new steps
initStepper : stepper1210414679942 // initialise stepper with new full list of steps
kt.stepper.next : stepper1210414679942 // user clicked next
kt.stepper.changed : stepper1210414679942 // stepper changed to step 2 BUT >>>
kt.stepper.next : stepper1210414679942 // next event fired again ??
kt.stepper.changed : stepper1210414679942 // and stepper when to 3rd step
The more times the stepper is destroyed and initialized, the more duplicate next/previous events are fired.
Hopes this help debugging.
Thanks
Jason
Hi,
Could you please send us your full code so we can test the plugin with your scenario? You may send us your code via https://gist.github.com/
Regard.
Hi,
Can you try to have 2 stepper instances(HTML and JS) based on the selection logic you display/hide the one you need?
We plan to enable dynamic step to add/show API in a future update. This will need a major update to implement it properly.
Regard.
I have kind of come up with a partial work-around, where I don't initialize the stepper for step 1, i.e. it's just displayed, then when the user selected which action to run, I initialize it with the steps for that action.
But if the user goes back to step 1 and selects a different action, then it starts firing next/prev methods a number of times.
I might just try and use my own next/prev logic and not initialize it at all, just use it's css.
Agree, your idea sounds good. We will improve the stepper component in the near future so it will be more flexible.
