Skip to content

Commit 19cd3ad

Browse files
authored
Merge pull request #10863 from IgniteUI/ttonev-fix-10806
fix(selectionDirective): added number selection
2 parents 87c5571 + 7067fa9 commit 19cd3ad

File tree

2 files changed

+105
-31
lines changed

2 files changed

+105
-31
lines changed
Lines changed: 103 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, DebugElement, ViewChild } from '@angular/core';
2-
import { TestBed, waitForAsync } from '@angular/core/testing';
2+
import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
44
import { IgxTextSelectionModule } from './text-selection.directive';
55

@@ -12,57 +12,119 @@ describe('IgxSelection', () => {
1212
declarations: [
1313
TriggerTextSelectionComponent,
1414
TriggerTextSelectionOnClickComponent,
15-
TriggerTextSelectionFalseOnClickComponent
1615
],
1716
imports: [IgxTextSelectionModule]
1817
});
1918
}));
2019

21-
it('Should select the text which is into the input', async () => {
20+
21+
it('Should select the text which is into the input', () => {
2222
const fix = TestBed.createComponent(TriggerTextSelectionComponent);
2323
fix.detectChanges();
2424

2525
const input = fix.debugElement.query(By.css('input')).nativeElement;
2626
input.focus();
2727

28-
fix.whenStable().then(() => {
29-
fix.detectChanges();
30-
expect(input.selectionEnd).toEqual(input.value.length);
31-
expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value);
32-
});
28+
expect(input.selectionEnd).toEqual(input.value.length);
29+
expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value);
3330
});
3431

35-
it('Should select the text when the input is clicked', async () => {
32+
it('Should select the text when the input is clicked', ()=> {
3633
const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
3734
fix.detectChanges();
3835

3936
const input: DebugElement = fix.debugElement.query(By.css('input'));
4037
const inputNativeElem = input.nativeElement;
4138
const inputElem: HTMLElement = input.nativeElement;
4239

43-
inputElem.click();
40+
inputElem.click(); // might need to change to .focus
41+
fix.detectChanges();
42+
43+
expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
44+
expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
45+
.toEqual(inputNativeElem.value);
46+
});
47+
48+
it('Should check if the value is selected if based on input type', fakeAsync(() => {
49+
const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
50+
const selectableTypes: Types[] = [
51+
{ "text" : "Some Values!" },
52+
{ "search": "Search!" },
53+
{ "password": "********" },
54+
{ "tel": '+(359)554-587-415' },
55+
{ "url": "www.infragistics.com" },
56+
{ "number": 2136512312 }
57+
];
58+
59+
const nonSelectableTypes: Types[] = [
60+
{'date': new Date() },
61+
{'datetime-local': "2018-06-12T19:30" },
62+
{'email': '[email protected]'},
63+
{'month': "2018-05" },
64+
{'time': "13:30"},
65+
{'week': "2017-W01"}
66+
];
67+
68+
//skipped on purpose, if needed feel free to add to any of the above categories
69+
//const irrelevantTypes = ['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit']
4470

45-
fix.whenStable().then(() => {
71+
const input = fix.debugElement.query(By.css('input'));
72+
const inputNativeElem = input.nativeElement;
73+
const inputElem: HTMLElement = input.nativeElement;
74+
75+
selectableTypes.forEach( el => {
76+
let type = Object.keys(el)[0];
77+
let val = el[type];
78+
fix.componentInstance.inputType = type;
79+
fix.componentInstance.inputValue = val;
4680
fix.detectChanges();
47-
expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
48-
expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
49-
.toEqual(inputNativeElem.value);
81+
82+
inputElem.click();
83+
fix.detectChanges();
84+
85+
if(type !== 'number'){
86+
expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
87+
expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
88+
.toEqual(val);
89+
}
90+
91+
if(type === 'number'){
92+
let selection = document.getSelection().toString();
93+
tick(1000);
94+
expect((String(val)).length).toBe(selection.length);
95+
}
5096
});
51-
});
5297

53-
it('Shouldn\'t make a selection when the state is set to false', async () => {
54-
const fix = TestBed.createComponent(TriggerTextSelectionFalseOnClickComponent);
98+
nonSelectableTypes.forEach( el => {
99+
let type = Object.keys(el)[0];
100+
let val = el[type];
101+
fix.componentInstance.inputType = type;
102+
fix.componentInstance.inputValue = val;
103+
fix.detectChanges();
104+
105+
inputElem.focus();
106+
fix.detectChanges();
107+
expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd);
108+
});
109+
}));
110+
111+
112+
113+
it('Shouldn\'t make a selection when the state is set to false', () => {
114+
const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
115+
fix.componentInstance.selectValue = false;
116+
fix.componentInstance.inputType = "text";
117+
fix.componentInstance.inputValue = "4444444";
55118
fix.detectChanges();
56119

57120
const input = fix.debugElement.query(By.css('input'));
58121
const inputNativeElem = input.nativeElement;
59122
const inputElem: HTMLElement = input.nativeElement;
60123

61-
inputElem.click();
62-
fix.detectChanges();
63124

64-
expect(inputNativeElem.selectionEnd).toEqual(0);
65-
expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)).toEqual('');
125+
inputElem.focus();
126+
fix.detectChanges();
127+
expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd);
66128
});
67129
});
68130

@@ -77,14 +139,25 @@ class TriggerTextSelectionComponent { }
77139
@Component({
78140
template:
79141
`
80-
<input type="text" [igxTextSelection] #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
142+
<input #input [type]="inputType" [igxTextSelection]="selectValue" #select="igxTextSelection" (click)="select.trigger()" [value]="inputValue" />
81143
`
82144
})
83-
class TriggerTextSelectionOnClickComponent { }
84-
@Component({
85-
template:
86-
`
87-
<input type="text" [igxTextSelection]="false" #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
88-
`
89-
})
90-
class TriggerTextSelectionFalseOnClickComponent { }
145+
class TriggerTextSelectionOnClickComponent {
146+
public selectValue = true;
147+
public inputType: any = "text";
148+
public inputValue: any = "Some custom V!"
149+
150+
@ViewChild('input',{read: HTMLInputElement, static:true}) public input: HTMLInputElement;
151+
152+
public waitForOneSecond() {
153+
return new Promise(resolve => {
154+
setTimeout(() => {
155+
resolve("I promise to return after one second!");
156+
}, 1000);
157+
});
158+
}
159+
}
160+
161+
interface Types {
162+
[key: string]: any;
163+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,10 @@ export class IgxTextSelectionDirective {
105105
* }
106106
* ```
107107
*/
108+
108109
public trigger() {
109110
if (this.selected && this.nativeElement.value.length) {
110-
requestAnimationFrame(() => this.nativeElement.setSelectionRange(0, this.nativeElement.value.length));
111+
this.nativeElement.select();
111112
}
112113
}
113114
}

0 commit comments

Comments
 (0)