Metronic React wizard not working correctly
I bought the Metronic template for the React version. The wizard is not working correctly when data-kt-stepper-action="step" is used. This should make the steps clickable but this doesn't work.
I place the attribute like it is also used in the HTML template.
if i look at the _StepperComponent.ts source code:
DOMEventHandlerUtil.on(this.element, "[data-kt-stepper-action="step"]", "click", (e: Event) => {
e.preventDefault()
if (this.steps && this.steps.length > 0) {
for (let i = 0; i < this.steps.length; i++) {
if ((this.steps[i] as HTMLElement) === this.element) {
let index = i + 1
const stepDirection = this._getStepDirection(index)
EventHandlerUtil.trigger(this.element, `stepper.${stepDirection}`, e)
return
}
}
}
})This can never work as
this.steps[i] as HTMLElement) === this.element will never be true.Can you guys make a bugfix for this?
Replies (5)
Review your implementation of the Metronic React Wizard component. Check for any errors bandle or inconsistencies in your code that might be causing the issue. Pay attention to props, event handlers, and component lifecycle methods.
Hi,
We will check this issue in more detail, could you please specify which stepper example you are trying to reuse in React version?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
It's both wizard / stepper examples that doesn't matter.
I wrote a fix myself which is located in _StepperComponent.ts and _DOMEventHandlerUtil.ts
I also found another bug related to the wizard in DomHelpers.ts: getElementIndex which I also fixed (but hacky now).
To which email address can I send the fixes so you can do a compare yourself
Hi,
Thank you for your message, good catch.
I've added the bug ticket to our development backlog, we will fix it in the next release.
If you want to share your solution you can describe your fix here in the comments below.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
this is the html from the first block. Need to paste it here as the site gives an error if i edit the question.
div className="stepper-item current" data-kt-stepper-element="nav" data-kt-stepper-action="step"
