fix(datepicker): updateOn not working with non-bubbling events (#9632)

Fixes the datepicker not supporting certain events inside `ngModelOptions.updateOn`. These are usually events that don't bubble (e.g. `blur`) and should be bound to the input, however since the `ng-model-options` are on the root element, Angular binds it's handlers to it.

Fixes #9577.

Author: crisbeto

src/components/datepicker/js/datepickerDirective.js

@@ -418,6 +418,18 @@
 
     // Responds to external error state changes (e.g. ng-required based on another input).
     ngModelCtrl.$viewChangeListeners.unshift(angular.bind(this, this.updateErrorState));
+
+    // Forwards any events from the input to the root element. This is necessary to get `updateOn`
+    // working for events that don't bubble (e.g. 'blur') since Angular binds the handlers to
+    // the `<md-datepicker>`.
+    var updateOn = ngModelCtrl.$options && ngModelCtrl.$options.updateOn;
+
+    if (updateOn) {
+      this.ngInputElement.on(
+        updateOn,
+        angular.bind(this.$element, this.$element.triggerHandler, updateOn)
+      );
+    }
   };
 
   /**

src/components/datepicker/js/datepickerDirective.spec.js

@@ -353,7 +353,7 @@ describe('md-datepicker', function() {
       expect(controller.ngModelCtrl.$touched).toBe(true);
     });
 
-    it('should become touch from blurring the input', function() {
+    it('should become touched from blurring the input', function() {
       populateInputElement('17/1/2015');
 
       var input = angular.element(controller.inputElement);
@@ -371,6 +371,18 @@ describe('md-datepicker', function() {
       populateInputElement('7');
       expect(pageScope.myDate).toEqual(date);
     });
+
+    it('should work with ngModelOptions.updateOn', function() {
+      var expectedDate = new Date(2015, JAN, 17);
+
+      createDatepickerInstance('<md-datepicker ng-model="myDate" ' +
+        'ng-model-options="{ updateOn: \'blur\' }"></md-datepicker>');
+
+      populateInputElement('01/17/2015');
+      angular.element(element.querySelector('input')).triggerHandler('blur');
+
+      expect(pageScope.myDate).toEqual(expectedDate);
+    });
   });
 
   describe('floating calendar pane', function() {