fix(select): edge case where the model value is unset w/ AngularJS 1.7.8 (#11724)

* fix(select): edge case where the model value is unset w/ AngularJS 1.7.8

when md-select is used inside of an AngularJS component
- where the component sets an initial value
- and that value is bound to the md-select's ng-model
- and the options are using the value attribute (instead of ng-value)
- and the md-select has ng-required that binds to an expression
- and that expression is updated by $scope.$applyAsync in the component
then the value could end up being reset to undefined.
with this fix, the md-select's value remains set
add an example of testing an AngularJS Component

Fixes #11679

* build: update to AngularJS 1.7.8

clarify the package.json description

Author: Splaktar

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-material-source",
   "version": "1.1.18",
-  "description": "The AngularJS Material project is an implementation of Material Design in AngularJS. This project provides a set of reusable, well-tested, and accessible Material Design UI components. AngularJS Material is supported internally at Google by the AngularJS, Material Design UX and other product teams.",
+  "description": "The AngularJS Material project is an implementation of Material Design in AngularJS. This project provides a set of reusable, well-tested, and accessible Material Design UI components. AngularJS Material is supported internally at Google by the AngularJS, Angular Components, and other product teams.",
   "keywords": [
     "client-side",
     "browser",
@@ -35,14 +35,14 @@
     "@octokit/rest": "^15.9.2",
     "add-stream": "^1.0.0",
     "ajv": "^6.6.2",
-    "angular": "^1.7.7",
-    "angular-animate": "^1.7.7",
-    "angular-aria": "^1.7.7",
-    "angular-messages": "^1.7.7",
-    "angular-mocks": "^1.7.7",
-    "angular-route": "^1.7.7",
-    "angular-sanitize": "^1.7.7",
-    "angular-touch": "^1.7.7",
+    "angular": "^1.7.8",
+    "angular-animate": "^1.7.8",
+    "angular-aria": "^1.7.8",
+    "angular-messages": "^1.7.8",
+    "angular-mocks": "^1.7.8",
+    "angular-route": "^1.7.8",
+    "angular-sanitize": "^1.7.8",
+    "angular-touch": "^1.7.8",
     "angularytics": "^0.4.0",
     "canonical-path": "0.0.2",
     "cli-color": "^1.4.0",

package.json

@@ -839,7 +839,8 @@ function SelectMenuDirective($parse, $mdUtil, $mdConstant, $mdTheming) {
         // the current option, which will be added, then we can be sure, that the validation
         // of the option has occurred before the option was added properly.
         // This means, that we have to manually trigger a new validation of the current option.
-        if (angular.isDefined(self.ngModel.$modelValue) && self.hashGetter(self.ngModel.$modelValue) === hashKey) {
+        if (angular.isDefined(self.ngModel.$$rawModelValue) &&
+            self.hashGetter(self.ngModel.$$rawModelValue) === hashKey) {
           self.ngModel.$validate();
         }
 

src/components/select/select.js

@@ -2,8 +2,28 @@ describe('<md-select>', function() {
   var attachedElements = [];
   var body, $document, $rootScope, $compile, $timeout, $material;
 
+  /**
+   * Register any custom components here.
+   */
+  beforeEach(module(function ($compileProvider) {
+    $compileProvider.component('requiredFormFieldComponent', {
+      controller: ['$scope', function($scope) {
+        var $ctrl = this;
+        $ctrl.value = 'test';
+
+        $scope.$applyAsync(function () {
+          $ctrl.required = true;
+        });
+      }],
+      template: '<md-input-container><label>Test select</label>' +
+        '<md-select name="value" ng-model="$ctrl.value" ng-required="$ctrl.required">' +
+        '<md-option value="test">Test value</md-option>' +
+        '</md-select></md-input-container>'
+    });
+  }));
+
   beforeEach(function() {
-    module('material.components.select', 'material.components.input', 'ngSanitize');
+    module('material.components.select', 'material.components.input', 'ngSanitize', 'ngMessages');
 
     inject(function($injector) {
       $document = $injector.get('$document');
@@ -1486,6 +1506,25 @@ describe('<md-select>', function() {
     });
   });
 
+  // Only test with custom components on AngularJS 1.5+
+  if (angular.version.major === 1 && angular.version.minor >= 5) {
+    describe('with custom components', function() {
+      it('should re-validate when the required value changes within $applyAsync', function() {
+        var nodes = $compile('<form name="testForm">' +
+          ' <required-form-field-component></required-form-field-component>' +
+          '</form>')($rootScope);
+        var ctrl = nodes.find('required-form-field-component')
+                        .controller('requiredFormFieldComponent');
+
+        $rootScope.$digest();
+        $timeout.flush();
+
+        expect(ctrl.value).toBe('test');
+        expect($rootScope.testForm.value.$error.required).toBeUndefined();
+      });
+    });
+  }
+
   function setupSelect(attrs, options, skipLabel, scope, optCompileOpts) {
     var el;
     var template = '' +