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 (9)
Custom sexdolls made of this special material can effectively withstand all these external factors. This quality of this doll presents an unusual sight. Silicone dolls can sometimes enjoy the pleasure of bathing together.
Test the stepper functionality to confirm that clicking on the steps now works as expected slice master.
It looks like you're having issues with the wizard functionality in the Medtronic React template retro bowl. The issue is caused by the comparison in the event handler, where this. steps[i] is compared to this. element, which may not match as expected.
Check the official Metronic React documentation and the wizard component documentation to ensure coreball that you have successfully implemented the wizard. Double-check the wizard component's configuration, including any properties or options that must be entered correctly.
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"
