fix(cell-selection): add default selection in edit mode - master (#12493)

* fix(cell-selection): add default selection in edit mode

* fix(cell-selection): add test for new selectio in edit mode

Co-authored-by: Hristo <[email protected]>

Author: Svetloslav15

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -474,6 +474,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     this.onTouchCallback();
     this.updateMask();
     super.onFocus();
+    this.nativeElement.select();
   }
 
   /** @hidden @internal */

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -77,6 +77,7 @@
                 [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
+                [igxTextSelection]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
                 (compositionend)="grid.crudService.isInCompositionMode = false"
@@ -90,6 +91,7 @@
                 [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
+                [igxTextSelection]="true"
                 [step]="step"
                 type="number"
                 [formControl]="formControl"
@@ -150,6 +152,7 @@
                 [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
+                [igxTextSelection]="true"
                 [step]="step"
                 type="number"
                 [formControl]="formControl"
@@ -164,6 +167,7 @@
                 [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
+                [igxTextSelection]="true"
                 [step]="step"
                 type="number"
                 [formControl]="formControl"

projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts

@@ -309,6 +309,24 @@ describe('IgxGrid - Cell Editing #grid', () => {
 
             expect(cell.editMode).toBe(false);
         });
+    
+        it('should focus the first cell when editing mode is cell', fakeAsync(() => {
+            const cell = grid.gridAPI.get_cell_by_index(0, 'fullName');
+            expect(cell.editMode).toBe(false);
+            expect(document.activeElement.nodeName).toEqual('BODY')
+            
+            // Enter cell edit mode
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell);
+            fixture.detectChanges();
+            tick(100);
+
+            // Check focused element and selection
+            expect(cell.editMode).toBe(true);
+            expect(document.activeElement.nodeName).toEqual('INPUT')
+            expect((document.activeElement as HTMLInputElement).value).toBe('John Brown');
+            expect((document.activeElement as HTMLInputElement).selectionStart).toEqual(0)
+            expect((document.activeElement as HTMLInputElement).selectionEnd).toEqual(10)
+        }));
     });
 
     describe('Scroll, pin and blur', () => {

src/app/grid-cellEditing/grid-cellEditing.component.ts

@@ -170,7 +170,6 @@ export class GridCellEditingComponent {
     public updateSelectedCell() {
         let newValue;
         const selectedCell = this.gridWithoutPK.selectedCells[0];
-        console.log(selectedCell.column.dataType);
         switch (selectedCell.column.dataType) {
             case 'string': newValue = 'UpdatedCell'; break;
             case 'number': newValue = 0; break;