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 { }