Merge pull request #5815 from IgniteUI/iganchev/date-picker-select-text

Add text selection directive for editable input (dropdown mode) scenarios

Author: kdinev

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

@@ -15,7 +15,8 @@
             <igx-icon>today</igx-icon>
         </igx-prefix>
         <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
-        <input #editableInput class="igx-date-picker__input-date" igxInput type="text" [value]="transformedDate"
+        <input #editableInput class="igx-date-picker__input-date" igxInput [igxTextSelection]="true"
+            type="text" [value]="transformedDate"
             [igxMask]="inputMask" [placeholder]="mask" [disabled]="disabled" [displayValuePipe]="displayValuePipe"
             [focusedValuePipe]="inputValuePipe" (blur)="onBlur($event)" (wheel)="onWheel($event)"
             (input)="onInput($event)" (focus)="onFocus()" />
@@ -25,4 +26,4 @@
     </igx-input-group>
 </ng-template>
 
-<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
+<ng-container *ngTemplateOutlet="template; context: context"></ng-container>

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<IgxDatePickerEditableComponent>;
+        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({

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