fix(select(multiple)): Remove side-effects to forms when adding md-select elements (#11491)

* Remove code which causes side effect on form elements
* Add a delay to the initial render of a multiple select so that it doesn't set the element to dirty on initialization.

Fixes #11490

Author: cstephe

src/components/select/select.js

@@ -291,15 +291,6 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
       findSelectContainer();
       $mdTheming(element);
 
-      if (formCtrl && angular.isDefined(attr.multiple)) {
-        $mdUtil.nextTick(function() {
-          var hasModelValue = ngModelCtrl.$modelValue || ngModelCtrl.$viewValue;
-          if (hasModelValue) {
-            formCtrl.$setPristine();
-          }
-        });
-      }
-
       var originalRender = ngModelCtrl.$render;
       ngModelCtrl.$render = function() {
         originalRender();
@@ -673,13 +664,26 @@ function SelectMenuDirective($parse, $mdUtil, $mdConstant, $mdTheming) {
       if (deregisterCollectionWatch) deregisterCollectionWatch();
 
       if (self.isMultiple) {
+        // We want to delay the render method so that the directive has a chance to load before
+        // rendering, this prevents the control being marked as dirty onload.
+        var loaded = false;
+        var delayedRender = function(val) {
+          if (!loaded) {
+            $mdUtil.nextTick(function () {
+              renderMultiple(val);
+              loaded = true;
+            });
+          } else {
+            renderMultiple(val);
+          }
+        };
         ngModel.$validators['md-multiple'] = validateArray;
-        ngModel.$render = renderMultiple;
+        ngModel.$render = delayedRender;
 
         // watchCollection on the model because by default ngModel only watches the model's
-        // reference. This allowed the developer to also push and pop from their array.
+        // reference. This allows the developer to also push and pop from their array.
         $scope.$watchCollection(self.modelBinding, function(value) {
-          if (validateArray(value)) renderMultiple(value);
+          if (validateArray(value)) delayedRender(value);
         });
 
         ngModel.$isEmpty = function(value) {

src/components/select/select.spec.js

@@ -507,7 +507,7 @@ describe('<md-select>', function() {
 
       $rootScope.$digest();
       $rootScope.$digest();
-
+      $timeout.flush();
       expect(label.text()).toBe('One, Three');
       expect(label.hasClass('md-select-placeholder')).toBe(false);
 
@@ -1087,6 +1087,36 @@ describe('<md-select>', function() {
         expect($rootScope.testForm.$pristine).toBe(true);
       });
 
+        it('should not change a dirty form to pristine', function() {
+            $rootScope.rows = [[2], [4,3]];
+            $rootScope.filterTerm;
+            $rootScope.opts = [1, 2, 3, 4];
+            var select = $compile('<form name="testForm">' +
+                '<div ng-repeat="item in rows | filter:filterTerm">' +
+                '<md-select ng-model="item" name="multiSelect" multiple id="{{$index}}">' +
+                '<md-option ng-repeat="opt in opts" ng-value="opt"></md-option>' +
+                '</md-select>' +
+                '</div></form>')($rootScope);
+            $rootScope.$apply();
+            $timeout.flush();
+            expect(select.find('md-select').length).toBe(2);
+            $rootScope.testForm.$setDirty();
+            $rootScope.$apply();
+            $timeout.flush();
+            expect($rootScope.testForm.$pristine).toBeFalsy();
+            $rootScope.filterTerm = "2";
+            $rootScope.$apply();
+            $timeout.flush();
+            expect(select.find('md-select').length).toBe(1);
+            expect($rootScope.testForm.$pristine).toBeFalsy();
+            $rootScope.filterTerm = "";
+            $rootScope.$apply();
+            $timeout.flush();
+            expect(select.find('md-select').length).toBe(2);
+            expect($rootScope.testForm.$dirty).toBeTruthy();
+            expect($rootScope.testForm.$pristine).toBeFalsy();
+        });
+
       it('should correctly update the input containers label', function() {
         var el = setupSelect('ng-required="isRequired" ng-model="someModel"');
         var label = el.find('label');
@@ -1466,7 +1496,9 @@ describe('<md-select>', function() {
 
   function setupSelectMultiple(attrs, options, skipLabel, scope) {
     attrs = (attrs || '') + ' multiple';
-    return setupSelect(attrs, options, skipLabel, scope);
+    var toReturn = setupSelect(attrs, options, skipLabel, scope);
+    $timeout.flush();
+    return toReturn;
   }
 
   function optTemplate(options, compileOpts) {