CODEWITHSUNDEEP
htmlangularangular-materialtabindex
Shubham Shaw
Shubham Shaw

Reputation: 1005

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-label>Password</mat-label>
                    <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
                    </mat-error>
                   
                  </mat-form-field>

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.

Upvotes: 3

Views: 11645

Answers (2)

Lindauson
Lindauson

Reputation: 3441

The ability to specify tabindex was added with this pull request.

Upvotes: 0

Shubham Shaw
Shubham Shaw

Reputation: 1005

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">
  <mat-label>Password</mat-label>
  <input matInput [type]="hideSignUp ? 'password' : 'text'" placeholder="Password" formControlName="pass" #passwordWithValidation />
                    
  <button
   type="button"
   mat-icon-button
   matSuffix
   (click)="hideSignUp = !hideSignUp"
   [attr.aria-label]="'Hide password'"
   [attr.aria-pressed]="hide"
   tabindex="-1"
 >
 <mat-icon>{{
   hideSignUp ? "visibility_off" : "visibility"
 }}</mat-icon>
 </button>
 <mat-error *ngIf="signupController.pass.errors?.required">Password is required</mat-error>
</mat-form-field>

Upvotes: 2

Related Questions