CODEWITHSUNDEEP
javascripthtmlangularangular-material
infodev
infodev

Reputation: 5235

Focus next input when pressing Tab in Angular

I have multiple editable inputs on my screen .

Between theses editable inputs I have buttons and disabled inputs.

The actual behavior is when I press Tab the html elements between the current input and next one get focused. I should so press Tab until I get to my sibling Input.

This behavior is not what I want.

What I'm expecting is that when I press Tab the next desired Input get Focused.

Here a simplified code

    <ng-container #form *ngFor="let elm of elms; let currIndex = index" cdkTrapFocus
        [cdkTrapFocusAutoCapture]="true">
      <app-item [index]="currIndex">
    Here I get a line with : span, disabled input , editable input then a button
      </app-item>
    </ng-container>

I tried to use a directive that focus next sibling depending on it's not working due to complex nested html elements inside app-item.

I would like to know if there is a much simpler solution using Angular CDK and "tag" desired items to focus using tab key ?

Upvotes: 0

Views: 4711

Answers (1)

NeNaD
NeNaD

Reputation: 20374

You can dynamically add tabindex="-1" attribute to input element, and when you click tab key, that element will be skipped.

So on each button and disabled inputs, just add tabindex="-1" attribute.

<input tabindex="-1" />

Upvotes: 4

Related Questions