Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit f265a0e

Browse files
topherfangiojelbourn
authored andcommitted
fix(select): Ensure md-no-asterisk attribute works. (#9347)
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.
1 parent d230aec commit f265a0e

File tree

4 files changed

+29
-5
lines changed

4 files changed

+29
-5
lines changed

src/components/select/demoBasicUsage/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060

6161
<div layout="row" layout-align="space-between center">
6262
<span>What armor do you wear?</span>
63-
<md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required>
63+
<md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required md-no-asterisk="false">
6464
<md-option value="cloth">Cloth</md-option>
6565
<md-option value="leather">Leather</md-option>
6666
<md-option value="chain">Chainmail</md-option>

src/components/select/select.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ angular.module('material.components.select', [
7777
* @param {expression=} md-selected-text Expression to be evaluated that will return a string
7878
* to be displayed as a placeholder in the select input box when it is closed.
7979
* @param {string=} placeholder Placeholder hint text.
80-
* @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the floating label.
80+
* @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the
81+
* floating label. **Note:** This attribute is only evaluated once; it is not watched.
8182
* @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
8283
* explicit label is present.
8384
* @param {string=} md-container-class Class list to get applied to the `.md-select-menu-container`
@@ -276,6 +277,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
276277
var isReadonly = angular.isDefined(attr.readonly);
277278
var disableAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
278279

280+
if (disableAsterisk) {
281+
element.addClass('md-no-asterisk');
282+
}
283+
279284
if (containerCtrl) {
280285
var isErrorGetter = containerCtrl.isErrorGetter || function() {
281286
return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
@@ -319,7 +324,6 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
319324
inputCheckValue();
320325
};
321326

322-
323327
attr.$observe('placeholder', ngModelCtrl.$render);
324328

325329
if (containerCtrl && containerCtrl.label) {

src/components/select/select.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ md-input-container > md-select {
8282
// NOTE: When the input has a value and uses a floating label, the floating label will show the
8383
// asterisk denoting that it is required
8484
md-input-container:not(.md-input-has-value) {
85-
md-select[required], md-select.ng-required {
85+
md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
8686
.md-select-value span:first-child:after {
8787
content: ' *';
8888
font-size: 13px;
@@ -105,7 +105,7 @@ md-select {
105105
margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
106106

107107
&[required], &.ng-required {
108-
&.ng-invalid {
108+
&.ng-invalid:not(.md-no-asterisk) {
109109
.md-select-value span:first-child:after {
110110
content: ' *';
111111
font-size: 13px;

src/components/select/select.spec.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1023,6 +1023,26 @@ describe('<md-select>', function() {
10231023
expect(label).not.toHaveClass('md-required');
10241024
}));
10251025

1026+
it('correctly adds the .md-no-asterisk class if the attribute is empty', function() {
1027+
var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
1028+
var select = el.find('md-select');
1029+
1030+
expect(select).toHaveClass('md-no-asterisk');
1031+
});
1032+
1033+
it('correctly adds the .md-no-asterisk class if the attribute is true', function() {
1034+
var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
1035+
var select = el.find('md-select');
1036+
1037+
expect(select).toHaveClass('md-no-asterisk');
1038+
});
1039+
1040+
it('correctly removes the .md-no-asterisk class if the attribute is false', function() {
1041+
var el = setupSelect('ng-required="isRequired" md-no-asterisk="false" ng-model="someModel"');
1042+
var select = el.find('md-select');
1043+
1044+
expect(select).not.toHaveClass('md-no-asterisk');
1045+
});
10261046
});
10271047

10281048
describe('view->model', function() {

0 commit comments

Comments
 (0)