Stepper "data-on-step-click" not going to callback function

[Vamoshi]

Discussed in https://github.com/olton/Metro-UI-CSS/discussions/1872

^{Originally posted by Vamoshi June 13, 2022} Hello so I was introduced by my friend to Metro 4 and so far I am loving it. However, one very frustrating thing I've come across is that the "data-on-step-click" does not work in the stepper.

Here is my code snippet:

<div data-role="stepper"
     data-steps="6"
     data-view="cycle"
     data-clickable="true"
     data-click-step="true"
     data-on-step-click="onStepClick"
     data-on-step="onStep">
</div>

The onStepClick callback does not fire in this case, however I tried placing the function as the callback for "data-on-step", and the function is working fine there. I've been trying out different things the past few hours and I can't seem to make it work.

There's only this one line in the documentation talking about "data-on-step-click":

onStepClick(step, element) | data-on-step-click | Fired when user click on the step (required set attribute data-click-step="true")

There's nothing else in the documentation I could find that was able to help me, not even an example for this data attribute, it just mentions it. Any assistance is greatly appreciated! Thanks!

This is the website where I'm reading the documentation from btw: https://metroui.org.ua/stepper.html

[Elfsong]

<div data-role="stepper"
     data-steps="6"
     data-view="cycle"
     data-clickable="true"
     data-on-step-click="onStepClick"
     data-click-step="true"
     data-on-step="onStep">
</div>

Try it. Swap the order of data-on-step-click and data-click-step.