Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
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 (5)


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"



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



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.


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  :(