Merge pull request #10863 from IgniteUI/ttonev-fix-10806

fix(selectionDirective): added number selection

projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts

@@ -1,5 +1,5 @@
 import { Component, DebugElement, ViewChild } from '@angular/core';
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxTextSelectionModule } from './text-selection.directive';
 
@@ -12,57 +12,119 @@ describe('IgxSelection', () => {
             declarations: [
                 TriggerTextSelectionComponent,
                 TriggerTextSelectionOnClickComponent,
-                TriggerTextSelectionFalseOnClickComponent
             ],
             imports: [IgxTextSelectionModule]
         });
     }));
 
-    it('Should select the text which is into the input', async () => {
+
+    it('Should select the text which is into the input', () => {
         const fix = TestBed.createComponent(TriggerTextSelectionComponent);
         fix.detectChanges();
 
         const input = fix.debugElement.query(By.css('input')).nativeElement;
         input.focus();
 
-        fix.whenStable().then(() => {
-            fix.detectChanges();
-            expect(input.selectionEnd).toEqual(input.value.length);
-            expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value);
-        });
+        expect(input.selectionEnd).toEqual(input.value.length);
+        expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value);
     });
 
-    it('Should select the text when the input is clicked', async () => {
+    it('Should select the text when the input is clicked', ()=> {
         const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
         fix.detectChanges();
 
         const input: DebugElement = fix.debugElement.query(By.css('input'));
         const inputNativeElem = input.nativeElement;
         const inputElem: HTMLElement = input.nativeElement;
 
-        inputElem.click();
+        inputElem.click(); // might need to change to .focus
+        fix.detectChanges();
+
+        expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
+        expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
+            .toEqual(inputNativeElem.value);
+    });
+
+    it('Should check if the value is selected if based on input type', fakeAsync(() => {
+        const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
+        const selectableTypes: Types[] = [
+            { "text" : "Some Values!" },
+            { "search": "Search!" },
+            { "password": "********" },
+            { "tel": '+(359)554-587-415' },
+            { "url": "www.infragistics.com" },
+            { "number": 2136512312 }
+        ];
+
+        const nonSelectableTypes: Types[] = [
+            {'date': new Date() },
+            {'datetime-local': "2018-06-12T19:30" },
+            {'email': '[email protected]'},
+            {'month': "2018-05" },
+            {'time': "13:30"},
+            {'week': "2017-W01"}
+        ];
+
+        //skipped on purpose, if needed feel free to add to any of the above categories
+        //const irrelevantTypes = ['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit']
 
-        fix.whenStable().then(() => {
+        const input = fix.debugElement.query(By.css('input'));
+        const inputNativeElem = input.nativeElement;
+        const inputElem: HTMLElement = input.nativeElement;
+
+        selectableTypes.forEach( el => {
+            let type = Object.keys(el)[0];
+            let val = el[type];
+            fix.componentInstance.inputType = type;
+            fix.componentInstance.inputValue = val;
             fix.detectChanges();
-            expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
-            expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
-                .toEqual(inputNativeElem.value);
+
+            inputElem.click();
+            fix.detectChanges();
+
+            if(type !== 'number'){
+                expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
+                expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
+                    .toEqual(val);
+            }
+
+            if(type === 'number'){
+                let selection = document.getSelection().toString();
+                tick(1000);
+                expect((String(val)).length).toBe(selection.length);
+            }
         });
-    });
 
-    it('Shouldn\'t make a selection when the state is set to false', async () => {
-        const fix = TestBed.createComponent(TriggerTextSelectionFalseOnClickComponent);
+        nonSelectableTypes.forEach( el => {
+            let type = Object.keys(el)[0];
+            let val = el[type];
+            fix.componentInstance.inputType = type;
+            fix.componentInstance.inputValue = val;
+            fix.detectChanges();
+
+            inputElem.focus();
+            fix.detectChanges();
+            expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd);
+        });
+    }));
+
+
+
+    it('Shouldn\'t make a selection when the state is set to false', () => {
+        const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
+        fix.componentInstance.selectValue = false;
+        fix.componentInstance.inputType = "text";
+        fix.componentInstance.inputValue = "4444444";
         fix.detectChanges();
 
         const input = fix.debugElement.query(By.css('input'));
         const inputNativeElem = input.nativeElement;
         const inputElem: HTMLElement = input.nativeElement;
 
-        inputElem.click();
-        fix.detectChanges();
 
-        expect(inputNativeElem.selectionEnd).toEqual(0);
-        expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)).toEqual('');
+        inputElem.focus();
+        fix.detectChanges();
+        expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd);
     });
 });
 
@@ -77,14 +139,25 @@ class TriggerTextSelectionComponent { }
 @Component({
     template:
         `
-            <input type="text" [igxTextSelection] #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
+            <input #input [type]="inputType" [igxTextSelection]="selectValue" #select="igxTextSelection" (click)="select.trigger()" [value]="inputValue" />
         `
 })
-class TriggerTextSelectionOnClickComponent { }
-@Component({
-    template:
-    `
-        <input type="text" [igxTextSelection]="false" #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
-    `
-})
-class TriggerTextSelectionFalseOnClickComponent { }
+class TriggerTextSelectionOnClickComponent {
+    public selectValue = true;
+    public inputType: any = "text";
+    public inputValue: any = "Some custom V!"
+
+    @ViewChild('input',{read: HTMLInputElement, static:true}) public input: HTMLInputElement;
+
+    public waitForOneSecond() {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve("I promise to return after one second!");
+          }, 1000);
+        });
+      }
+ }
+
+ interface Types {
+     [key: string]: any;
+ }

projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts

@@ -105,9 +105,10 @@ export class IgxTextSelectionDirective {
      * }
      * ```
      */
+
     public trigger() {
         if (this.selected && this.nativeElement.value.length) {
-            requestAnimationFrame(() => this.nativeElement.setSelectionRange(0, this.nativeElement.value.length));
+                this.nativeElement.select();
         }
     }
 }