setting tabindex to angular material element

Question

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>

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.

Shubham Shaw · Accepted Answer · 2020-08-07 06:00:58Z

3

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>

answered Aug 7, 2020 at 6:00

Shubham Shaw

1,0153 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lindauson · Accepted Answer · 2021-09-06 16:57:10Z

0

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

answered Sep 6, 2021 at 16:57

Lindauson

3,5192 gold badges36 silver badges37 bronze badges

Collectives™ on Stack Overflow

setting tabindex to angular material element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related