fix(select): unable to reopen if element was destroyed while closing (#10556)

Fixes #10453.

Author: crisbeto

src/components/select/select.js

@@ -1112,33 +1112,43 @@ function SelectProvider($$interimElementProvider) {
      * Interim-element onRemove logic....
      */
     function onRemove(scope, element, opts) {
+      var animationRunner = null;
+      var destroyListener = scope.$on('$destroy', function() {
+        // Listen for the case where the element was destroyed while there was an
+        // ongoing close animation. If this happens, we need to end the animation
+        // manually.
+        animationRunner.end();
+      });
+
       opts = opts || { };
       opts.cleanupInteraction();
       opts.cleanupResizing();
       opts.hideBackdrop();
 
       // For navigation $destroy events, do a quick, non-animated removal,
       // but for normal closes (from clicks, etc) animate the removal
-
-      return  (opts.$destroy === true) ? cleanElement() : animateRemoval().then( cleanElement );
+      return (opts.$destroy === true) ? cleanElement() : animateRemoval().then(cleanElement);
 
       /**
        * For normal closes (eg clicks), animate the removal.
        * For forced closes (like $destroy events from navigation),
        * skip the animations
        */
       function animateRemoval() {
-        return $animateCss(element, {addClass: 'md-leave'}).start();
+        animationRunner = $animateCss(element, {addClass: 'md-leave'});
+        return animationRunner.start();
       }
 
       /**
        * Restore the element to a closed state
        */
       function cleanElement() {
+        destroyListener();
 
-        element.removeClass('md-active');
-        element.attr('aria-hidden', 'true');
-        element[0].style.display = 'none';
+        element
+          .removeClass('md-active')
+          .attr('aria-hidden', 'true')
+          .css('display', 'none');
 
         announceClosed(opts);
 

src/components/select/select.spec.js

@@ -271,6 +271,27 @@ describe('<md-select>', function() {
       expect(label.textContent).toBe('4');
     });
 
+    it('it should be able to reopen if the element was destroyed while the close ' +
+      'animation is running', function() {
+        $rootScope.showSelect = true;
+
+        var container = setupSelect('ng-model="val" ng-if="showSelect"', [1, 2, 3]);
+        var select = container.find('md-select');
+
+        openSelect(select);
+        expectSelectOpen(select);
+
+        clickOption(select, 0);
+        $rootScope.$apply('showSelect = false');
+        expectSelectClosed(select);
+
+        $rootScope.$apply('showSelect = true');
+        select = container.find('md-select');
+
+        openSelect(select);
+        expectSelectOpen(select);
+      });
+
     describe('when required', function() {
       it('allows 0 as a valid default value', function() {
         $rootScope.model = 0;