Igniteui-angular: IgxDatePicker: tabindex attribute is not working as expected

[luiscla27]

Description

tabindex attribute is focusing the wrong DOM

• igniteui-angular version: Tested on 9.0.1 and 9.0.5
• browser: Chrome

Steps to reproduce

Open the demo and press the TAB key multiple times
https://stackblitz.com/edit/datepicker-tabindex

Result

INPUT's are being correctly focused at first, however they stop being focused after that, Container is being focused instead.

I think the problem is that IgxDatePicker is missing an @Input to handle tabindex value

Expected result

Pressing TAB key should always focus their INPUT dom, never it's container. Also inputs should be focused by their tabindex value order

Attachments

Container is being focused instead:

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[MayaKirova]

@luiscla27 As this is the default Angular attribute binding the behavior you are observing is expected.
As you are setting a tab index to the root element it will become a tab stop when navigating the page with Tab.
We currently do not expose an Input that allows setting a tab index for the default input element, however since the date picker allows the content to be templated you could define an input with the desired tab index inside it.
For example:

<igx-date-picker [value]="date"> <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value" let-displayData="displayData"> <igx-input-group (click)="openDialog()"> <igx-prefix> <igx-icon>event_note</igx-icon> </igx-prefix> <label igxLabel>Date Picker</label> <input igxInput tabindex="4" [value]="displayData"/> </igx-input-group> </ng-template> </igx-date-picker>

Here’s a sample for your reference:
https://stackblitz.com/edit/github-vnlfnh

If you would still prefer a specific input, for example a editorTabIndex property that would allow setting a tab index to the default template input, please feel free to log it as a feature request.

[luiscla27]

Thank you for you'r feedback @MayaKirova, actually that was the workaround i used :)

I know that's the default behavior... Even tho i consider a bug that you missed to expose the tabIndex property, tab key usage is a standard behavior for HTML components i don't see why you wouldn't want to expose it.

Can you please add the "feature-request" tag?? (I can't)

[MayaKirova]

@luiscla27 We are always happy to introduce improvements based on user feedback.
I've logged it as a separate feature request issue. As it will be a new Input property it will only be included in the latest version (10.1.x and up). Let me know if you have any additional questions or concerns.