If in one of the steps you add beforeRouteLeave method to ask user are they sure they want to leave, and they click no (staying on the route), md-stepper still changes active class to the step user clicked.
I see there is a watcher on the route to sync active step to it.
Issue with this is that route has not been changed, therefore this will not take place. But stepper has its own inner state management that changes the step to the one user clicked, regardless of route syncing and it calls this method.
setActiveStep (id) { if (this.mdLinear && !this.isPreviousStepperDone(id)) { return false } if (id !== this.MdSteppers.activeStep && (this.isStepperEditable(id) || !this.isStepperDone(id))) { this.setPreviousStepperAsDone(id) this.MdSteppers.activeStep = id this.$emit('md-changed', id) this.$emit('update:mdActiveStep', id) this.MdSteppers.items[id].error = null } }
Hacky solution I found is to put ref on stepper and call this setActiveStep method with proper step id.
If in one of the steps you add beforeRouteLeave method to ask user are they sure they want to leave, and they click no (staying on the route), md-stepper still changes active class to the step user clicked.
I see there is a watcher on the route to sync active step to it.
if (this.mdSyncRoute) { this.$watch('$route', { deep: true, handler () { this.setActiveStepByRoute() } }) }Issue with this is that route has not been changed, therefore this will not take place. But stepper has its own inner state management that changes the step to the one user clicked, regardless of route syncing and it calls this method.
setActiveStep (id) { if (this.mdLinear && !this.isPreviousStepperDone(id)) { return false } if (id !== this.MdSteppers.activeStep && (this.isStepperEditable(id) || !this.isStepperDone(id))) { this.setPreviousStepperAsDone(id) this.MdSteppers.activeStep = id this.$emit('md-changed', id) this.$emit('update:mdActiveStep', id) this.MdSteppers.items[id].error = null } }Hacky solution I found is to put ref on stepper and call this setActiveStep method with proper step id.