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:
<pre> 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 } } } }) </pre>This can never work as <code>this.steps[i] as HTMLElement) === this.element</code> will never be true.
Can you guys make a bugfix for this?
Replies (4)
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"
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
