0

I have implemented a linear mat-stepper in my application. It consists of some forms on each step to which you can navigate using next and previous buttons. You can go to next step by clicking on next button only when the current form's data is valid. There is no data validation on previous functionality.

You can't navigate between steps by clicking directly on the step headers or mat-step. But the real problem is that mat-stepper allows to navigate to next step using space or enter keys.

I want to prevent this, i.e., user should not be able to navigate to next step by key-press irrespective of whether the form is valid or not.

Following is my implementation of mat-stepper:

  1. stepperForm.html
<mat-vertical-stepper class="sidebar-internal" #stepper linear (selectionChange)="selectionChange($event)">
    <!-- a list of all the current steps -->
    <mat-step
        *ngFor="let item of stepList; let i = index"
        [label]="item?.label"
    >
    </mat-step>
    <!-- example of how it was done previously -->
</mat-vertical-stepper>
<div class="button-wrapper">
    <button
        class="btn button-secondary previous-button"
        (click)="goPrev(stepper)"
        [disabled]="hidePrevBtn"
        type="button"
    >
        <mat-icon>west</mat-icon> Previous
    </button>
    <button
        class="btn button-primary next-button"
        (click)="goNext(stepper)"
        [disabled]="hideNextBtn"
        type="button"
    >
        Next <mat-icon>east</mat-icon>
    </button>
</div>

So, how can I prevent mat-step to move forward on key-press?

Please let me know if you want any other information.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Yogesh
  • 366
  • 2
  • 16
  • I think the problem is not in the `mat-stepper`. I guess you have an initial focus on the 'Next' button. You can just remove that focus by using the `blur()` method on that button element. – Dmitry S. Mar 07 '21 at 18:40
  • Okay, yes I've an initial focus on 'Next' button, and its a requirement. But the issue is coming up when we navigate through keyboard and as soon as we are on the `mat-step` and try to change the `mat-step` using keyboard. I don't think it has any relation with 'Next' button having initial focus – Yogesh Mar 08 '21 at 04:53

0 Answers0