Material: select(multiple): label doesn't float and overlaps model value when control has initial values

[rudzikdawid]

Bug

1.1.11 https://codepen.io/anon/pen/oJooMa

1.1.10 https://codepen.io/anon/pen/zyPPMR

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

open https://codepen.io/anon/pen/oJooMa

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.5
• AngularJS Material: 1.1.11
• OS: Fedora 29
• Browsers: Chrome 70

[codymikol]

After a bisect the offending commit is 97e2d004523d2ca5ac9b54e567d8eddc7246aae7

[codymikol]

The specific line that seems to cause this is

ngModel.$render = delayedRender;

Changing this back to

ngModel.$render = renderMultiple;

Seems to fix the issue. I don't fully understand the purpose of this change yet so I'll do a little more digging.

[codymikol]

Looks like the delay prevents the class md-input-has-value from being added to the md-input-container

[codymikol]

And this can be fixed by adjusting where the md-input-has-value is evaluated within the inputCheckValue and waiting until next tick so it is in sync with the delayed render. I'll make a PR momentarily.

[Splaktar]

@codymikol thank you for looking into this! We'll want to make sure that the tests from PR https://github.com/angular/material/pull/11491 still pass and the fix doesn't cause problems with form state changing when a md-select multiple is added to a form.

[Splaktar]

@rudzikdawid what is different about your CodePen as compared to the pizza example in the docs that seems to be working fine? Is it just having multiple values selected on load that causes this?

[codymikol]

I've fixed this with tests @Splaktar 🐔 Putting in a PR now.

[rudzikdawid]

@rudzikdawid what is different about your CodePen as compared to the pizza example in the docs that seems to be working fine? Is it just having multiple values selected on load that causes this?

Main difference is the value of the model when component is initialized.
In docs model is empty, in my codePen i've passed model

$scope.selectedToppings = [
   'Pepperoni',
   'Mushrooms'
];

And then with initialized model inside controller... we can see bug in 1.1.11 release