select: cannot be opened again sometimes when removed

[csvn]

Actual Behavior:

• What is the issue? *
  Removing md-select from the DOM (e.g. via ng-if) when md-options are currently being transitioning away results in no md-select ever being able to open again.
• What is the expected behavior?
  Removing md-select with transition in progress correctly cleans up so it can be re-opened again.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/csvn/pen/WpwqdJ?editors=1010
• Details:
  Just click the select box once, and the next times either of them won't open.

Angular Versions: *

• Angular Version:
  1.5.11
• Angular Material Version:
  v1.1.3. It looked like it might work in v1.1.1, so this might be a regression.

Additional Information:

• Browser Type: *
  Chrome
• Browser Version: *
  v56
• OS: *
  Windows
• Stack Traces:

---

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.

[csvn]

I wrote a short explanation behind why this happens in the pen, but I'll summarize here too:

1. leave animation starts on .md-select-menu-container
   https://github.com/angular/material/blob/master/src/components/select/select.js#L1121-L1130
   2, md-select is removed (e.g. ng-if, ng/ui-router view), triggering instant removal of .md-select-menu-container
2. the transition promise from 1) is never completed, preventing additional .md-select-menu-container from opening

I encountered this when my select box was removed via ui-router. The ui-view had a short animation, resulting in the race condition my codepen tries to illustrate.

[csvn]

I just checked in the codepen, and this was working in v1.1.1, but breaks in v1.1.2. Just FYI 😉

[lobo87]

hi, having the same issue. first time md-select is rendered, everything works as expected. Second click into md-select does not show the options anymore.

is there any quick and dirty fix? :D

[csvn]

@lobo87 I couldnt find a general fix, just a case by case one. Where I used my md-select, I had a state transition happen which triggered this bug. To solve it, I added a short $timeout() on the transition, preventing this issue from occurring.

[jelbourn]

Also reported by Google team.

[jelbourn]

@crisbeto would you be able to take a look at this?

[crisbeto]

I'll look at it tomorrow.

[oemmes]

I encountered the same issue when using ng-repeat to dynamically create a list of form controls (which may change depending on the selected values in my actual application):

http://codepen.io/anon/pen/QvWwrW

I found a workaround by using "track by" in the ng-repeat expression (ctrl.selects is an array):
ng-repeat="(idx,sel) in ctrl.selects track by idx"

Hopefully the next version including crisbeto's fix will be available soon.