setting tabindex to angular material element


i have a password field created using angular material. and there is a password visibility toggle button there. if it were a simple button i could have set tabindex="-1", but tabindex doesn’t work on "mat-pass-toggle-visibility"

                  <mat-form-field appearance="fill" style="width: 100%;" class="input-custo-design">
                    <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>

                    <input matInput [type]="toggle.type" placeholder="Password" formControlName="pass" #passwordWithValidation />
                    <mat-error *ngIf="signupController.pass.errors?.required">Password is required

enter image description here

i got a github link mat-password, where this issue is there, but currently is there somehow i can do a workaround??

in chrome dev-tools i can see "mat-pass-toggle-visibility" does in the end create a button only. so can we set any directive or such thing.


for my use case i got another way around:
using the normal button class

<mat-form-field appearance="fill" style="width: 100%;" class="input-custo-design">
  <input matInput [type]="hideSignUp ? 'password' : 'text'" placeholder="Password" formControlName="pass" #passwordWithValidation />
   (click)="hideSignUp = !hideSignUp"
   [attr.aria-label]="'Hide password'"
   hideSignUp ? "visibility_off" : "visibility"
 <mat-error *ngIf="signupController.pass.errors?.required">Password is required</mat-error>

Answered By – Shubham Shaw

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.