feat(igxDatePicker): Adding new input - editorTabIndex that allows setting tabindex for the input in the default template.

Author: MKirova

CHANGELOG.md

@@ -17,6 +17,8 @@ All notable changes for each version of this project will be documented in this
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
 - `igxTreeGrid`
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
+- `igxDatePicker`
+    -  Added new property - `editorTabIndex`, that allows setting tabindex for the default editor.
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -10,6 +10,7 @@
             [value]="displayData || ''"
             [disabled]="disabled"
             (blur)="onBlur($event)"
+            [tabindex]='editorTabIndex'
             readonly
         />
     </igx-input-group>
@@ -36,6 +37,7 @@
             (wheel)="onWheel($event)"
             (input)="onInput($event)"
             (focus)="onFocus()"
+            [tabindex]='editorTabIndex'
         />
         <igx-suffix *ngIf="!isEmpty" (click)="clear()">
             <igx-icon>clear</igx-icon>

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -277,6 +277,13 @@ describe('IgxDatePicker', () => {
                 expect(input).toEqual(document.activeElement);
             }));
 
+            it('should allow setting editorTabIndex', () => {
+                fixture.componentInstance.datePicker.editorTabIndex = 3;
+                fixture.detectChanges();
+                const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+                expect(input.tabIndex).toBe(3);
+            });
+
     });
 
     describe('DatePicker with passed date', () => {

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -177,6 +177,15 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      */
     @Input() public locale: 'en';
 
+    /**
+     * Gets/Sets the default template editor's tabindex.
+     * @example
+     * ```html
+     * <igx-date-picker editorTabIndex="1"></igx-date-picker>
+     * ```
+     */
+    @Input() public editorTabIndex: number;
+
     /**
      * Gets/Sets on which day the week starts.
      * @example