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

Commit a4507d6

Browse files
codymikolmmalerba
authored andcommitted
fix(select): evaluate md-input-has-value on next tick (#11572)
this needs to happen after $render which is now evaluated on next tick Fixes #11571 <!-- Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed. --> ## PR Checklist Please check that your PR fulfills the following requirements: - [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format) - [x] Tests for the changes have been added or this is not a bug fix / enhancement - [ ] Docs have been added, updated, or were not required ## PR Type What kind of change does this PR introduce? <!-- Please check the one that applies to this PR using "x". --> ``` [x] Bugfix [ ] Enhancement [ ] Documentation content changes [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Infrastructure changes [ ] Other... Please describe: ``` ## What is the current behavior? <!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. --> Currently select labels are mashed into the values of a multi-selector. This is the result of 97e2d00 Now multi-selectors $render is delayed to fix an incompatibility with forms. Issue Number: #11571 ## What is the new behavior? Now the label is in the correct place. To fix this I've updated the method that evaluates whether the select container should add the md-input-has-value class to also happen after $mdUtil.nextTick. This allows the class evaluation to happen in sync with the $render functionality. After adding a $timeout.flush() to related tests to simulate the nextTick all tests passed. A test to prove this fix was also added to prevent future regressions. ## Does this PR introduce a breaking change? ``` [ ] Yes [x] No ``` <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. --> <!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. --> ## Other information N/A
1 parent a49043d commit a4507d6

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

src/components/select/select.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
514514
function inputCheckValue() {
515515
// The select counts as having a value if one or more options are selected,
516516
// or if the input's validity state says it has bad input (eg string in a number input)
517-
containerCtrl && containerCtrl.setHasValue(selectMenuCtrl.selectedLabels().length > 0 || (element[0].validity || {}).badInput);
517+
// we must do this on nextTick as the $render is sometimes invoked on nextTick.
518+
$mdUtil.nextTick(function () {
519+
containerCtrl && containerCtrl.setHasValue(selectMenuCtrl.selectedLabels().length > 0 || (element[0].validity || {}).badInput);
520+
});
518521
}
519522

520523
function findSelectContainer() {

src/components/select/select.spec.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,9 +291,11 @@ describe('<md-select>', function() {
291291

292292
clickOption(select, 0);
293293
$rootScope.$apply('showSelect = false');
294+
$timeout.flush();
294295
expectSelectClosed(select);
295296

296297
$rootScope.$apply('showSelect = true');
298+
$timeout.flush();
297299
select = container.find('md-select');
298300

299301
openSelect(select);
@@ -336,6 +338,7 @@ describe('<md-select>', function() {
336338
expect(el).toHaveClass('md-input-has-value');
337339

338340
$rootScope.$apply('value = null');
341+
$timeout.flush();
339342
expect(el).not.toHaveClass('md-input-has-value');
340343
});
341344

@@ -1010,6 +1013,12 @@ describe('<md-select>', function() {
10101013
expect(ngModelCtrl.$valid).toBe(true);
10111014
});
10121015

1016+
it('should have the proper md-has-input-class when the model has selected values', function() {
1017+
$rootScope.model = [2,4,5,6];
1018+
var el = setupSelectMultiple('ng-model="$root.model"', [1,2,3,4,5,6]);
1019+
expect(el).toHaveClass('md-input-has-value');
1020+
});
1021+
10131022
it('does not let an empty array satisfy required', function() {
10141023
$rootScope.model = [];
10151024
$rootScope.opts = [1, 2, 3, 4];
@@ -1251,7 +1260,7 @@ describe('<md-select>', function() {
12511260
'<md-option ng-repeat="opt in opts" ng-value="opt">{{opt}}</md-option>' +
12521261
'</md-select></form>')($rootScope);
12531262
var el = form.find('md-select');
1254-
1263+
12551264
$rootScope.$digest();
12561265
$timeout.flush();
12571266

@@ -1489,6 +1498,7 @@ describe('<md-select>', function() {
14891498

14901499
el = $compile(template)(scope || $rootScope);
14911500
$rootScope.$digest();
1501+
$timeout.flush();
14921502
attachedElements.push(el);
14931503

14941504
return el;

0 commit comments

Comments
 (0)