feat(select): Add output event for blur (#1977)

Adds `@Output() readonly blur = new EventEmitter<any>();`

closes #1971

Author: trimox

demos/src/app/components/select-demo/api.html

@@ -89,16 +89,20 @@ <h4 mdcSubtitle2>Events</h4>
     <tbody>
       <tr>
         <td>
-          valueChange(index: number, value: string)
+          valueChange(index: number, value: any)
         </td>
         <td>Event emitted on any value change.</td>
       </tr>
       <tr>
         <td>
-          selectionChange(source: MdcSelect, index: number, value: string)
+          selectionChange(source: MdcSelect, index: number, value: any)
         </td>
         <td>Event emitted if user changed the value.</td>
       </tr>
+      <tr>
+        <td>blur(value: any)</td>
+        <td>Emitted whenever the select loses focus.</td>
+      </tr>
     </tbody>
   </table>
 </div>

packages/select/select.ts

@@ -276,6 +276,7 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterContentInit,
    */
   @Output() readonly valueChange:
     EventEmitter<{ index: number, value: any }> = new EventEmitter<any>();
+  @Output() readonly blur = new EventEmitter<any>();
 
   @ViewChild(MdcFloatingLabel, {static: false}) _floatingLabel?: MdcFloatingLabel;
   @ViewChild(MdcLineRipple, {static: false}) _lineRipple?: MdcLineRipple;
@@ -508,6 +509,7 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterContentInit,
       this._foundation.handleBlur();
       this._onTouched();
       this.focused = false;
+      this.blur.emit(this.value);
     }
   }
 

test/select/select.test.ts

@@ -10,7 +10,7 @@ import {fakeAsync, ComponentFixture, TestBed, flush} from '@angular/core/testing
 import {By} from '@angular/platform-browser';
 import {DOWN_ARROW} from '@angular/cdk/keycodes';
 
-import {dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent} from '../testing/dispatch-events';
+import {dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent, dispatchFakeEvent} from '../testing/dispatch-events';
 
 import {
   MdcSelectModule,
@@ -325,6 +325,15 @@ describe('MdcSelectModule', () => {
       fixture.detectChanges();
       expect(testInstance._menu.open).toBe(true);
     }));
+
+    it('#should handle blur event', () => {
+      spyOn(testComponent, 'handleBlur');
+      fixture.detectChanges();
+
+      dispatchFakeEvent(testInstance._selectedText.nativeElement, 'blur');
+      fixture.detectChanges();
+      expect(testComponent.handleBlur).toHaveBeenCalledTimes(1);
+    });
   });
 });
 
@@ -481,7 +490,7 @@ class SelectLazyLoad {
   template: `
   <form [formGroup]="foodForm" id="foodForm" #formDirective="ngForm">
     <mdc-select placeholder="Fruit" [helperText]="enhancedHelper" [required]="required"
-      [disabled]="disabled" [outlined]="outlined">
+      [disabled]="disabled" [outlined]="outlined" (blur)="handleBlur($event)">
       <mdc-menu [open]="open">
         <mdc-list>
           <mdc-list-item selected></mdc-list-item>
@@ -505,6 +514,8 @@ class EnhancedSelect {
   open: boolean;
   disabled: boolean;
 
+  handleBlur: (event?: any) => void = () => {};
+
   compareFn(f1: any, f2: any): boolean {
     return f1 && f2 ? f1.id === f2.id : f1 === f2;
   }