Disabling stepper titles using pointer-events none does not


Topic: Disabling stepper titles using pointer-events none does not work

GUIProgrammer asked a year ago

Current behavior

I've added using CSS the pointer-events: none to the step-titles, however, it still does not stop the stepper from activating nextStep() or prevStep().

According to another post (https://mdbootstrap.com/support/jquery/stepper-disable-all-steps/) the steps should be disabled.

Expected behavior

I need a JS function that disables all steps. We don't want a user to be able to proceed forward OR backward using the step titles. We only want the continue button in the step actions to proceed forward. We have validation that keeps the continue button disabled until the criteria is met, then it is enabled.

Why was this function not included from the original creators code?

// Enable or disable navigation by clicking on step-titles
   stepTitleNavigation: true,

Under options https://kinark.github.io/Materialize-stepper/

I have provided a snippet here but it is not working with steppers. Also, I cannot get the snippet to work even though I'm using Pro version?

Update

Can I do something along the lines of this? How can I prevent the nextStep() and prevStep() from firing?

$(".disabled-step-navigation").on("click" ,'.step:not(.active)', function (e) {
    e.preventStepChange();
})

Hi GUIProgrammer!

Thanks for your post. Our team will check this and we'll answer soon.

Best regards,


GUIProgrammer commented a year ago

I have created a solution to this issue myself. I created a copy of the stepper component code, made some additions and included my custom file instead of the other one. The solution was rather simple and I'm disappointed to see not see a response.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.11
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes