Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)


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"


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(