diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html index ea1f27a74ae..5dadb051d46 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html @@ -15,7 +15,8 @@ today - @@ -25,4 +26,4 @@ - \ No newline at end of file + diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index ae5b2bdd30c..7c7cc76185f 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -8,7 +8,7 @@ import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxInputDirective } from '../directives/input/input.directive'; import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { IgxInputGroupModule } from '../input-group'; - +import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive'; import { configureTestSuite } from '../test-utils/configure-suite'; import { DateRangeType } from 'igniteui-angular'; import { IgxButtonModule } from '../directives/button/button.directive'; @@ -32,7 +32,8 @@ describe('IgxDatePicker', () => { IgxDropDownDatePickerRetemplatedComponent, IgxDatePickerOpeningComponent ], - imports: [IgxDatePickerModule, FormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule] + imports: [IgxDatePickerModule, FormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule, + IgxButtonModule, IgxTextSelectionModule] }) .compileComponents(); })); @@ -1089,6 +1090,29 @@ describe('IgxDatePicker', () => { expect(instance.getEditElement()).toBe(editElement); }); }); + + describe('Drop-down mode select all text on focus', () => { + let fixture: ComponentFixture; + let datePicker: IgxDatePickerComponent; + + beforeEach(() => { + fixture = TestBed.createComponent(IgxDatePickerEditableComponent); + datePicker = fixture.componentInstance.datePicker; + fixture.detectChanges(); + }); + + it('Should select all input text on input focus', fakeAsync(() => { + const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement; + input.focus(); + fixture.detectChanges(); + tick(100); + + expect(input).toEqual(document.activeElement); + expect(input.selectionEnd).toEqual(input.value.length); + expect(input.selectionStart).toEqual(0); + expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value); + })); + }); }); @Component({ diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index a15519ef657..e55f760fe9d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -32,6 +32,7 @@ import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent } from ' import { Subject, fromEvent, animationFrameScheduler, interval } from 'rxjs'; import { filter, takeUntil, throttle } from 'rxjs/operators'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; +import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive'; import { OverlaySettings, IgxOverlayService, @@ -1379,7 +1380,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor IgxDatePickerTemplateDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe], exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe], - imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule, IgxMaskModule], + imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, + IgxRippleModule, IgxMaskModule, IgxTextSelectionModule], entryComponents: [IgxCalendarContainerComponent] }) export class IgxDatePickerModule { }