From 25e577fd356fc2f9448dc839a3119985f9c8a63c Mon Sep 17 00:00:00 2001
From: Topher Fangio <fangiotophia@gmail.com>
Date: Thu, 18 Aug 2016 17:19:04 -0500
Subject: [PATCH] fix(select): Ensure `md-no-asterisk` attribute works.

After a recent change to the asterisk colors, the `md-no-asterisk`
option was no longer working.

 - Update code to add a new `.md-no-asterisk` CSS class and fix styles.
 - Add appropriate tests.
 - Add `md-no-asterisk="false"` to demo so users can easily turn it on
   and test the fixed functionality.

Fixes #9339.
---
 .../select/demoBasicUsage/index.html          |  2 +-
 src/components/select/select.js               |  8 ++++++--
 src/components/select/select.scss             |  4 ++--
 src/components/select/select.spec.js          | 20 +++++++++++++++++++
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/select/demoBasicUsage/index.html b/src/components/select/demoBasicUsage/index.html
index 3beee57c17..165e0b2bb2 100755
--- a/src/components/select/demoBasicUsage/index.html
+++ b/src/components/select/demoBasicUsage/index.html
@@ -60,7 +60,7 @@
 
       <div layout="row" layout-align="space-between center">
         <span>What armor do you wear?</span>
-        <md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required>
+        <md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required md-no-asterisk="false">
           <md-option value="cloth">Cloth</md-option>
           <md-option value="leather">Leather</md-option>
           <md-option value="chain">Chainmail</md-option>
diff --git a/src/components/select/select.js b/src/components/select/select.js
index f79e599636..a10e820055 100755
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -74,7 +74,8 @@ angular.module('material.components.select', [
  * @param {expression=} md-selected-text Expression to be evaluated that will return a string
  * to be displayed as a placeholder in the select input box when it is closed.
  * @param {string=} placeholder Placeholder hint text.
- * @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the floating label.
+ * @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the
+ * floating label. **Note:** This attribute is only evaluated once; it is not watched.
  * @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
  * explicit label is present.
  * @param {string=} md-container-class Class list to get applied to the `.md-select-menu-container`
@@ -273,6 +274,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
       var isReadonly = angular.isDefined(attr.readonly);
       var disableAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
 
+      if (disableAsterisk) {
+        element.addClass('md-no-asterisk');
+      }
+
       if (containerCtrl) {
         var isErrorGetter = containerCtrl.isErrorGetter || function() {
           return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
@@ -316,7 +321,6 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
         inputCheckValue();
       };
 
-
       attr.$observe('placeholder', ngModelCtrl.$render);
 
       if (containerCtrl && containerCtrl.label) {
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 206d882362..8989525191 100755
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -82,7 +82,7 @@ md-input-container > md-select {
 // NOTE: When the input has a value and uses a floating label, the floating label will show the
 // asterisk denoting that it is required
 md-input-container:not(.md-input-has-value) {
-  md-select[required], md-select.ng-required {
+  md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
     .md-select-value span:first-child:after {
       content: ' *';
       font-size: 13px;
@@ -105,7 +105,7 @@ md-select {
   margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
 
   &[required], &.ng-required {
-    &.ng-invalid {
+    &.ng-invalid:not(.md-no-asterisk) {
       .md-select-value span:first-child:after {
         content: ' *';
         font-size: 13px;
diff --git a/src/components/select/select.spec.js b/src/components/select/select.spec.js
index 51a72c85e8..1fef1d0e6d 100755
--- a/src/components/select/select.spec.js
+++ b/src/components/select/select.spec.js
@@ -1023,6 +1023,26 @@ describe('<md-select>', function() {
         expect(label).not.toHaveClass('md-required');
       }));
 
+      it('correctly adds the .md-no-asterisk class if the attribute is empty', function() {
+        var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
+        var select = el.find('md-select');
+
+        expect(select).toHaveClass('md-no-asterisk');
+      });
+
+      it('correctly adds the .md-no-asterisk class if the attribute is true', function() {
+        var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
+        var select = el.find('md-select');
+
+        expect(select).toHaveClass('md-no-asterisk');
+      });
+
+      it('correctly removes the .md-no-asterisk class if the attribute is false', function() {
+        var el = setupSelect('ng-required="isRequired" md-no-asterisk="false" ng-model="someModel"');
+        var select = el.find('md-select');
+
+        expect(select).not.toHaveClass('md-no-asterisk');
+      });
     });
 
     describe('view->model', function() {