From 36722f07078ec15433500d46362a3f87377c4e70 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Tue, 5 Feb 2019 13:35:16 -0500 Subject: [PATCH 1/9] added blur event to select-field --- .../select-field.component.fixture.html | 4 +++- .../select-field.component.fixture.ts | 5 +++++ .../select-field.component.spec.ts | 10 ++++++++++ .../select-field/select-field.component.ts | 19 +++++++++++++++---- 4 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html index ccdd695..ac14193 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html @@ -12,5 +12,7 @@ [singleSelectPlaceholderText]="singleSelectPlaceholderText" [pickerHeading]="pickerHeading" [ngModel]="formData.modelValue" - (ngModelChange)="onModelChange($event)"> + (blur)="onTouch()" + (ngModelChange)="onModelChange($event)" + > diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts index 0ce913e..8bacd76 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts @@ -25,6 +25,7 @@ export class SkySelectFieldTestComponent implements OnInit, OnDestroy { public singleSelectOpenButtonTitle: string; public singleSelectPlaceholderText: string; public pickerHeading: string; + public touched = false; public data = new BehaviorSubject([]); @@ -58,4 +59,8 @@ export class SkySelectFieldTestComponent implements OnInit, OnDestroy { public setValue(value: any) { this.formData.modelValue = value; } + + public onTouch() { + this.touched = true; + } } diff --git a/src/app/public/modules/select-field/select-field.component.spec.ts b/src/app/public/modules/select-field/select-field.component.spec.ts index 466d96f..0b87698 100644 --- a/src/app/public/modules/select-field/select-field.component.spec.ts +++ b/src/app/public/modules/select-field/select-field.component.spec.ts @@ -136,6 +136,16 @@ describe('Select field component', () => { expect(selectField.singleSelectPlaceholderText).toEqual('placeholder'); expect(selectField.pickerHeading).toEqual('heading'); }); + + it('should trigger blur event onTouch', fakeAsync(() => { + fixture.detectChanges(); + setValue(undefined); + openPicker(); + fixture.detectChanges(); + closePicker(); + fixture.detectChanges(); + expect(component.touched).toBeTruthy(); + })); }); describe('multiple select', () => { diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index e52bc87..4cfd049 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -3,7 +3,9 @@ import { ChangeDetectorRef, Component, forwardRef, - Input + Input, + EventEmitter, + Output } from '@angular/core'; import { @@ -100,6 +102,9 @@ export class SkySelectFieldComponent implements ControlValueAccessor { @Input() public pickerHeading: string; + @Output() + public blur = new EventEmitter(); + public get value(): any { return this._value; } @@ -196,18 +201,21 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } } + public onTouched(): void { + this._onTouched(); + this.blur.emit(); + } + // Angular automatically constructs these methods. /* istanbul ignore next */ public onChange = (value: any) => { }; - /* istanbul ignore next */ - public onTouched = () => { }; public registerOnChange(fn: (value: any) => void) { this.onChange = fn; } public registerOnTouched(fn: () => void) { - this.onTouched = fn; + this._onTouched = fn; } public setDisabledState(disabled: boolean) { @@ -219,6 +227,9 @@ export class SkySelectFieldComponent implements ControlValueAccessor { this.value = undefined; } + /* istanbul ignore next */ + private _onTouched = () => { }; + private setTokensFromValue() { // Tokens only appear for multiple select mode. if (this.selectMode === 'single') { From 45c27f0ad0e9017418223f38af5c3f464edea8ef Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Thu, 7 Feb 2019 10:22:33 -0500 Subject: [PATCH 2/9] renamed blur to touched --- .../select-field/fixtures/select-field.component.fixture.html | 2 +- .../modules/select-field/select-field.component.spec.ts | 2 +- src/app/public/modules/select-field/select-field.component.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html index ac14193..b2e50f3 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html @@ -12,7 +12,7 @@ [singleSelectPlaceholderText]="singleSelectPlaceholderText" [pickerHeading]="pickerHeading" [ngModel]="formData.modelValue" - (blur)="onTouch()" + (touched)="onTouch()" (ngModelChange)="onModelChange($event)" > diff --git a/src/app/public/modules/select-field/select-field.component.spec.ts b/src/app/public/modules/select-field/select-field.component.spec.ts index 0b87698..188c643 100644 --- a/src/app/public/modules/select-field/select-field.component.spec.ts +++ b/src/app/public/modules/select-field/select-field.component.spec.ts @@ -137,7 +137,7 @@ describe('Select field component', () => { expect(selectField.pickerHeading).toEqual('heading'); }); - it('should trigger blur event onTouch', fakeAsync(() => { + it('should trigger touched event onTouch', fakeAsync(() => { fixture.detectChanges(); setValue(undefined); openPicker(); diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index 4cfd049..95ced74 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -103,7 +103,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { public pickerHeading: string; @Output() - public blur = new EventEmitter(); + public touched = new EventEmitter(); public get value(): any { return this._value; @@ -203,7 +203,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { public onTouched(): void { this._onTouched(); - this.blur.emit(); + this.touched.emit(); } // Angular automatically constructs these methods. From 6d34fd63eda079e4f6c1334cc452e2ef9bddf809 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 8 Feb 2019 01:47:36 -0500 Subject: [PATCH 3/9] Prevent redundant setter calls --- .../public/modules/select-field/select-field.component.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index 95ced74..7ab9835 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -110,9 +110,11 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } public set value(value: any) { - this._value = value; - this.onChange(this.value); - this.onTouched(); + if (value !== this._value) { + this._value = value; + this.onChange(this.value); + this.onTouched(); + } } public get singleSelectModeValue(): string { From 4865f32edbbc642194747fad2274f7ca0146abb2 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 13 Feb 2019 14:15:35 -0500 Subject: [PATCH 4/9] renamed to blur. Switched to actual blur trigger --- .../select-field.component.fixture.html | 2 +- .../select-field.component.fixture.ts | 4 +-- .../select-field/select-field.component.html | 5 ++- .../select-field.component.spec.ts | 35 +++++++++++++++---- .../select-field/select-field.component.ts | 31 +++++++++++----- .../select-field-visual.component.html | 6 ++-- 6 files changed, 62 insertions(+), 21 deletions(-) diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html index b2e50f3..ac14193 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html @@ -12,7 +12,7 @@ [singleSelectPlaceholderText]="singleSelectPlaceholderText" [pickerHeading]="pickerHeading" [ngModel]="formData.modelValue" - (touched)="onTouch()" + (blur)="onTouch()" (ngModelChange)="onModelChange($event)" > diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts index 8bacd76..43a32e1 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts @@ -25,7 +25,7 @@ export class SkySelectFieldTestComponent implements OnInit, OnDestroy { public singleSelectOpenButtonTitle: string; public singleSelectPlaceholderText: string; public pickerHeading: string; - public touched = false; + public touched = 0; public data = new BehaviorSubject([]); @@ -61,6 +61,6 @@ export class SkySelectFieldTestComponent implements OnInit, OnDestroy { } public onTouch() { - this.touched = true; + this.touched += 1; } } diff --git a/src/app/public/modules/select-field/select-field.component.html b/src/app/public/modules/select-field/select-field.component.html index 8816c36..b840962 100644 --- a/src/app/public/modules/select-field/select-field.component.html +++ b/src/app/public/modules/select-field/select-field.component.html @@ -1,4 +1,7 @@ -
+
diff --git a/src/app/public/modules/select-field/select-field.component.spec.ts b/src/app/public/modules/select-field/select-field.component.spec.ts index 188c643..7e54d2c 100644 --- a/src/app/public/modules/select-field/select-field.component.spec.ts +++ b/src/app/public/modules/select-field/select-field.component.spec.ts @@ -11,11 +11,21 @@ import { SkyAppTestUtility } from '@blackbaud/skyux-builder/runtime/testing/browser'; -import { SkyModalService } from '@skyux/modals'; +import { + SkyModalService +} from '@skyux/modals'; + +import { + SkySelectFieldComponent +} from './select-field.component'; -import { SkySelectFieldComponent } from './select-field.component'; -import { SkySelectFieldFixturesModule } from './fixtures/select-field-fixtures.module'; -import { SkySelectFieldTestComponent } from './fixtures/select-field.component.fixture'; +import { + SkySelectFieldFixturesModule +} from './fixtures/select-field-fixtures.module'; + +import { + SkySelectFieldTestComponent +} from './fixtures/select-field.component.fixture'; describe('Select field component', () => { let fixture: ComponentFixture; @@ -137,14 +147,27 @@ describe('Select field component', () => { expect(selectField.pickerHeading).toEqual('heading'); }); - it('should trigger touched event onTouch', fakeAsync(() => { + it('should trigger blur event on touch', fakeAsync(() => { fixture.detectChanges(); + setValue(undefined); openPicker(); fixture.detectChanges(); + + const selectFieldContainer: HTMLElement = fixture.nativeElement.querySelector('.sky-select-field'); + SkyAppTestUtility.fireDomEvent(selectFieldContainer, 'focusout'); + fixture.detectChanges(); + closePicker(); fixture.detectChanges(); - expect(component.touched).toBeTruthy(); + + SkyAppTestUtility.fireDomEvent(selectFieldContainer, 'focusout'); + fixture.detectChanges(); + + expect(component.touched).toBe(1); + + SkyAppTestUtility.fireDomEvent(selectFieldContainer, 'focusout'); + expect(component.touched).toBe(2); })); }); diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index 7ab9835..87962f0 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -13,7 +13,9 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Observable } from 'rxjs/Observable'; +import { + Observable +} from 'rxjs/Observable'; import { SkyModalService, @@ -33,8 +35,13 @@ import { SkySelectFieldSelectMode } from './types'; -import { SkySelectFieldPickerContext } from './select-field-picker-context'; -import { SkySelectFieldPickerComponent } from './select-field-picker.component'; +import { + SkySelectFieldPickerContext +} from './select-field-picker-context'; + +import { + SkySelectFieldPickerComponent +} from './select-field-picker.component'; @Component({ selector: 'sky-select-field', @@ -103,17 +110,18 @@ export class SkySelectFieldComponent implements ControlValueAccessor { public pickerHeading: string; @Output() - public touched = new EventEmitter(); + public blur = new EventEmitter(); public get value(): any { return this._value; } public set value(value: any) { - if (value !== this._value) { + if (JSON.stringify(this._value) !== JSON.stringify(value)) { this._value = value; this.onChange(this.value); - this.onTouched(); + this._onTouched(); + this.blur.emit(); } } @@ -133,6 +141,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { private _disabled: boolean; private _selectMode: SkySelectFieldSelectMode; private _value: any; + private isModalOpen = false; constructor( private changeDetector: ChangeDetectorRef, @@ -156,6 +165,8 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } public openPicker() { + this.isModalOpen = true; + ( this.pickerHeading ? Observable.of(this.pickerHeading) : @@ -186,7 +197,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { this.writeValue(result.data); } } - this.onTouched(); + this.isModalOpen = false; }); }); } @@ -204,8 +215,10 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } public onTouched(): void { - this._onTouched(); - this.touched.emit(); + if (!this.isModalOpen) { + this._onTouched(); + this.blur.emit(); + } } // Angular automatically constructs these methods. diff --git a/src/app/visual/select-field/select-field-visual.component.html b/src/app/visual/select-field/select-field-visual.component.html index 6f02bac..ef31026 100644 --- a/src/app/visual/select-field/select-field-visual.component.html +++ b/src/app/visual/select-field/select-field-visual.component.html @@ -6,7 +6,8 @@ name="single" [ngModel]="model.single" [data]="data" - required> + required + >
@@ -16,7 +17,8 @@ selectMode="multiple" name="multiple" [ngModel]="model.multiple" - [data]="data"> + [data]="data" + > From 0733b926027d4890d4b62b497ec80482f0e030f8 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 13 Feb 2019 14:19:33 -0500 Subject: [PATCH 5/9] moved common stuff to touch method --- .../modules/select-field/select-field.component.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index 87962f0..51a7932 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -120,8 +120,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { if (JSON.stringify(this._value) !== JSON.stringify(value)) { this._value = value; this.onChange(this.value); - this._onTouched(); - this.blur.emit(); + this.touch(); } } @@ -216,8 +215,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { public onTouched(): void { if (!this.isModalOpen) { - this._onTouched(); - this.blur.emit(); + this.touch(); } } @@ -245,6 +243,11 @@ export class SkySelectFieldComponent implements ControlValueAccessor { /* istanbul ignore next */ private _onTouched = () => { }; + private touch() { + this._onTouched(); + this.blur.emit(); + } + private setTokensFromValue() { // Tokens only appear for multiple select mode. if (this.selectMode === 'single') { From 3b171ffdc60939acf35e7dcef666d26ad08ec888 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 13 Feb 2019 14:41:05 -0500 Subject: [PATCH 6/9] shift focus in touch screenshot --- e2e/select-field.e2e-spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/e2e/select-field.e2e-spec.ts b/e2e/select-field.e2e-spec.ts index 3dbae69..e48af98 100644 --- a/e2e/select-field.e2e-spec.ts +++ b/e2e/select-field.e2e-spec.ts @@ -24,6 +24,7 @@ describe('Select field', () => { it('should match previous single mode screenshot with validation', (done) => { element(by.css('#screenshot-select-field-single-mode .sky-input-group.sky-btn')).click(); element(by.css('.sky-modal-btn-close')).click(); + element(by.css('body')).click(); SkyHostBrowser.moveCursorOffScreen(); expect('#screenshot-select-field-single-mode-wrapper').toMatchBaselineScreenshot(done, { screenshotName: 'select-field-single-mode-validation' From d5ae783c06736d925c736f7b46ba09942da80d54 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 20 Feb 2019 13:23:19 -0500 Subject: [PATCH 7/9] addressed pr comments --- .../select-field/select-field.component.html | 2 +- .../select-field/select-field.component.ts | 32 +++++++++++-------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/app/public/modules/select-field/select-field.component.html b/src/app/public/modules/select-field/select-field.component.html index b840962..9b4fcc2 100644 --- a/src/app/public/modules/select-field/select-field.component.html +++ b/src/app/public/modules/select-field/select-field.component.html @@ -1,6 +1,6 @@
diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index 51a7932..74c697b 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -5,7 +5,8 @@ import { forwardRef, Input, EventEmitter, - Output + Output, + OnDestroy } from '@angular/core'; import { @@ -57,7 +58,7 @@ import { } ] }) -export class SkySelectFieldComponent implements ControlValueAccessor { +export class SkySelectFieldComponent implements ControlValueAccessor, OnDestroy { @Input() public ariaLabel: string; @@ -120,7 +121,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { if (JSON.stringify(this._value) !== JSON.stringify(value)) { this._value = value; this.onChange(this.value); - this.touch(); + this.onTouched(); } } @@ -148,6 +149,10 @@ export class SkySelectFieldComponent implements ControlValueAccessor { private resourcesService: SkyLibResourcesService ) { } + public ngOnDestroy() { + this.blur.complete(); + } + public onTokensChange(change: SkyToken[]) { if (!change || change === this.tokens) { return; @@ -164,8 +169,6 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } public openPicker() { - this.isModalOpen = true; - ( this.pickerHeading ? Observable.of(this.pickerHeading) : @@ -187,6 +190,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { useValue: pickerContext }] }); + this.isModalOpen = true; modalInstance.closed.subscribe((result: SkyModalCloseArgs) => { if (result.reason === 'save') { @@ -213,12 +217,17 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } } - public onTouched(): void { + public onHostFocusOut(): void { if (!this.isModalOpen) { - this.touch(); + this.onTouched(); } } + public onTouched(): void { + this._registeredTouchCallback(); + this.blur.emit(); + } + // Angular automatically constructs these methods. /* istanbul ignore next */ public onChange = (value: any) => { }; @@ -228,7 +237,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } public registerOnTouched(fn: () => void) { - this._onTouched = fn; + this._registeredTouchCallback = fn; } public setDisabledState(disabled: boolean) { @@ -241,12 +250,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { } /* istanbul ignore next */ - private _onTouched = () => { }; - - private touch() { - this._onTouched(); - this.blur.emit(); - } + private _registeredTouchCallback = () => { }; private setTokensFromValue() { // Tokens only appear for multiple select mode. From 67c7a6411cb903e521993a6a9985e0a5eb91f284 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 20 Feb 2019 13:36:51 -0500 Subject: [PATCH 8/9] added testing for redundant values --- .../select-field.component.spec.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/app/public/modules/select-field/select-field.component.spec.ts b/src/app/public/modules/select-field/select-field.component.spec.ts index 7e54d2c..fc1beff 100644 --- a/src/app/public/modules/select-field/select-field.component.spec.ts +++ b/src/app/public/modules/select-field/select-field.component.spec.ts @@ -178,6 +178,18 @@ describe('Select field component', () => { expect(selectField.value[0].id).toEqual(component.staticData[0].id); })); + it('should ignore redundant value updates from ngModel', fakeAsync(() => { + fixture.detectChanges(); + + setValue([component.staticData[0]]); + fixture.detectChanges(); + expect(component.touched).toBe(1); + + setValue([component.staticData[0]]); + fixture.detectChanges(); + expect(component.touched).toBe(1); + })); + it('should collapse all tokens into one if many options are chosen', fakeAsync(() => { fixture.detectChanges(); setValue([]); @@ -214,6 +226,19 @@ describe('Select field component', () => { expect(selectField.value.id).toEqual(component.staticData[0].id); })); + it('should ignore redundant value updates from ngModel', fakeAsync(() => { + component.selectMode = 'single'; + fixture.detectChanges(); + + setValue(component.staticData[0]); + fixture.detectChanges(); + expect(component.touched).toBe(1); + + setValue(component.staticData[0]); + fixture.detectChanges(); + expect(component.touched).toBe(1); + })); + it('should select a value from the picker', fakeAsync(() => { component.selectMode = 'single'; fixture.detectChanges(); From 88b21eb43ac50a598daa86fda59f5e2433e735a1 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 20 Feb 2019 15:00:52 -0500 Subject: [PATCH 9/9] addressed trevor's comments --- .../select-field/fixtures/select-field.component.fixture.html | 2 +- .../select-field/fixtures/select-field.component.fixture.ts | 2 +- .../public/modules/select-field/select-field.component.spec.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html index ac14193..98395bc 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.html @@ -12,7 +12,7 @@ [singleSelectPlaceholderText]="singleSelectPlaceholderText" [pickerHeading]="pickerHeading" [ngModel]="formData.modelValue" - (blur)="onTouch()" + (blur)="onBlur()" (ngModelChange)="onModelChange($event)" > diff --git a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts index 43a32e1..0c26bef 100644 --- a/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts +++ b/src/app/public/modules/select-field/fixtures/select-field.component.fixture.ts @@ -60,7 +60,7 @@ export class SkySelectFieldTestComponent implements OnInit, OnDestroy { this.formData.modelValue = value; } - public onTouch() { + public onBlur() { this.touched += 1; } } diff --git a/src/app/public/modules/select-field/select-field.component.spec.ts b/src/app/public/modules/select-field/select-field.component.spec.ts index fc1beff..2234207 100644 --- a/src/app/public/modules/select-field/select-field.component.spec.ts +++ b/src/app/public/modules/select-field/select-field.component.spec.ts @@ -147,7 +147,7 @@ describe('Select field component', () => { expect(selectField.pickerHeading).toEqual('heading'); }); - it('should trigger blur event on touch', fakeAsync(() => { + it('should trigger blur event when focus is lost', fakeAsync(() => { fixture.detectChanges(); setValue(undefined);