Added blur event to select-field

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)"
+  >
   </sky-select-field>

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<any[]>([]);
 
@@ -58,4 +59,8 @@ export class SkySelectFieldTestComponent implements OnInit, OnDestroy {
   public setValue(value: any) {
     this.formData.modelValue = value;
   }
+
+  public onTouch() {
+    this.touched = true;
+  }
 }

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', () => {

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') {