fix(select): ngModel.$touched trigger after menu close

closes #5256

Author: rschmukler

src/components/select/select.js

@@ -147,6 +147,8 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
     return function postLink(scope, element, attr, ctrls) {
       var isDisabled;
 
+      var firstOpen = true;
+
       var containerCtrl = ctrls[0];
       var mdSelectCtrl = ctrls[1];
       var ngModelCtrl = ctrls[2];
@@ -200,6 +202,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
 
       attr.$observe('placeholder', ngModelCtrl.$render);
 
+
       mdSelectCtrl.setLabelText = function(text) {
         mdSelectCtrl.setIsPlaceholder(!text);
         // Use placeholder attribute, otherwise fallback to the md-input-container label
@@ -314,6 +317,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
         element.on('keydown', handleKeypress);
       }
 
+
       var ariaAttrs = {
         role: 'combobox',
         'aria-expanded': 'false'
@@ -387,6 +391,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
 
       function openSelect() {
         selectScope.isOpen = true;
+        if (firstOpen) {
+          element.on('blur', setUntouched);
+          firstOpen = false;
+        }
 
         $mdSelect.show({
           scope: selectScope,
@@ -396,9 +404,15 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
           target: element[0],
           hasBackdrop: true,
           loadingAsync: attr.mdOnOpen ? scope.$eval(attr.mdOnOpen) || true : false
-        }).then(function() {
+        }).finally(function() {
           selectScope.isOpen = false;
+          ngModelCtrl.$setTouched();
         });
+
+        function setUntouched() {
+          ngModelCtrl.$setUntouched();
+          element.off('blur', setUntouched);
+        }
       }
     };
   }

src/components/select/select.spec.js

@@ -59,6 +59,19 @@ describe('<md-select>', function() {
     expect(called).toBe(true);
   }));
 
+  it('should set touched only after closing', inject(function($compile, $rootScope) {
+    var form = $compile('<form name="myForm">' +
+                        '<md-select name="select" ng-model="val">' +
+                        '<md-option>1</md-option>' +
+                        '</md-select>' +
+                        '</form>')($rootScope);
+    var select = form.find('md-select');
+    openSelect(select);
+    expect($rootScope.myForm.select.$touched).toBe(false);
+    closeSelect();
+    expect($rootScope.myForm.select.$touched).toBe(true);
+  }));
+
   it('closes the menu during scope.$destroy()', inject(function($document, $rootScope, $timeout) {
     var container = angular.element("<div></div>");
     var scope = $rootScope.$new();
@@ -815,9 +828,17 @@ describe('<md-select>', function() {
     try {
       el.triggerHandler('click');
       waitForSelectOpen();
+      el.triggerHandler('blur');
     } catch(e) { }
   }
 
+  function closeSelect() {
+    inject(function($document) {
+      $document.find('md-backdrop').triggerHandler('click');
+    });
+    waitForSelectClose();
+  }
+
 
   function pressKey(el, code) {
       el.triggerHandler({

test/angular-material-mocks.js

@@ -47,6 +47,8 @@ angular.module('ngMaterial-mock', [
           $timeout.flush();
           this.flushOutstandingAnimations();
           $timeout.flush();
+          this.flushOutstandingAnimations();
+          $timeout.flush();
         }
       };
     }]);