Material: select: every md-select breaks if one of them is destroyed while animating

[chearon]

I could not find an existing issue for this, please feel free to close if it's already in here.

Actual Behavior:

• What is the issue? * If an md-select is removed while it's animating away, every md-select on the page will cease to function. Note that this is different than the ng-if issues reported to break ng-model.
• What is the expected behavior? Other md-selects should continue to function

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://jsfiddle.net/17yj06p7/
• Details: Change the second input, which will trigger the ng-if to remove the component while it's animating. The first input will no longer work.

AngularJS Versions: *

• AngularJS Version: 1.6.1
• AngularJS Material Version: 1.1.4

Additional Information:

• Browser Type: * Any
• Browser Version: * Any
• OS: * Any
• Stack Traces: N/A

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[joerideg]

I have the same problem. I thought it should have been fixed in https://github.com/angular/material/issues/10453
However when updating to angular material 1.1.4 it did not fix this issue.

The workaround that has been working for me is the ugly $timeout of about 200ms before doing the removal of the md select in the dom (by state/view change or whatever) to make sure the animation is complete.

[chearon]

We're using a workaround that is a little bit better than using $timeout:

function ngClickHandler() {
  // hide() has already been called by angular internally. If we call it
  // again, it returns the promise created by the first call
  $mdSelect.hide().then(() => {
    // Put the code that would remove the md-select here
  });
}

I know it works in a ng-click callback but I haven't tried if it works for ng-change.

It's too bad that PR didn't fix it, completing the promise on $destroy should have done it.... maybe this is a slightly different scenario than the one that was fixing.

[joerideg]

@chearon Where do you get the $mdSelect service from? Because its not documented as a service in the material library?

[chearon]

Yeah it might just be used internally, but you should be able to inject it and use it.

[postama]

We have a large application using angular material, and we experience this bug when updating from 1.0.9 to 1.1.4.

We experience it more often on larger, complex pages and slower API speeds (more difficult to reproduce locally than remote). We are not removing md-select like the reported bug by @chearon, but are changing it's options on click.

I was not able to produce a small test case like @chearon was, but I believe it is the same root cause. The attached gif shows it occurring on our application

[camhart]

I'm in a similar boat as @postama. @postama Did you find a work around that worked for you?

[postama]

@camhart No, we had to stay on angular material 1.0.9 until we have more time to investigate why it's happening.

[Splaktar]

Fixed by PR https://github.com/angular/material/pull/10556 in 1.1.5. Fixed demo with 1.1.5.