fix(select): close md-select-menu if md-select is removed

closes #1631
angular · Feb 24, 2015 · 5e02ad9 · 5e02ad9
1 parent d9938b1
commit 5e02ad9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/src/components/select/select.js b/src/components/select/select.js
@@ -121,6 +121,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming) {
     $mdTheming(element);
 
     return function postLink(scope, element, attr, ngModel) {
+      var isOpen;
       attr.$observe('disabled', function(disabled) {
         if (disabled !== undefined) {
           element.attr('tabindex', -1);
@@ -146,6 +147,12 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming) {
         'aria-labelledby': labelEl.attr('id')
       });
 
+      scope.$on('$destroy', function() {
+        if (isOpen) {
+          $mdSelect.cancel();
+        }
+      });
+
       function openOnKeypress(e) {
         var allowedCodes = [32, 13, 38, 40];
         if (allowedCodes.indexOf(e.keyCode) != -1 ) {
@@ -157,13 +164,16 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming) {
 
       function openSelect() {
         scope.$evalAsync(function() {
+          isOpen = true;
           $mdSelect.show({
             scope: scope.$new(),
             template: selectTemplate,
             target: element[0],
             ngModel: ngModel,
             hasBackdrop: true,
             loadingAsync: attr.mdOnOpen ? scope.$eval(attr.mdOnOpen) : false
+          }).then(function() {
+            isOpen = false;
           });
         });
       }

diff --git a/src/components/select/select.spec.js b/src/components/select/select.spec.js
@@ -2,6 +2,14 @@ describe('<md-select-menu>', function() {
 
   beforeEach(module('material.components.select', 'ngAnimateMock'));
 
+  beforeEach(inject(function($mdUtil, $q) {
+    $mdUtil.transitionEndPromise = function() {
+      var deferred = $q.defer();
+      deferred.resolve();
+      return deferred.promise;
+    };
+  }));
+
   function setupSelect(attrs, options) {
     var innerTpl = setup(attrs, options, true);
     var el;
@@ -56,14 +64,6 @@ describe('<md-select-menu>', function() {
     } catch(e) { }
   }
 
-  function waitForSelectOpen() {
-    try {
-      inject(function($rootScope, $animate) {
-          $rootScope.$digest();
-          $animate.triggerCallbacks();
-      });
-    } catch(e) { }
-  }
 
   function pressKey(el, code) {
     inject(function($rootScope, $animate, $timeout) {
@@ -74,7 +74,16 @@ describe('<md-select-menu>', function() {
     });
   }
 
-  function waitForSelectClose(el, fn) {
+  function waitForSelectOpen() {
+    try {
+      inject(function($rootScope, $animate) {
+          $rootScope.$digest();
+          $animate.triggerCallbacks();
+      });
+    } catch(e) { }
+  }
+
+  function waitForSelectClose() {
     inject(function($rootScope, $animate) {
       $rootScope.$digest();
       $animate.triggerCallbacks();
@@ -88,6 +97,16 @@ describe('<md-select-menu>', function() {
     expect($document.find('md-select-menu').length).toBe(0);
   }));
 
+  it('closes the menu if the element is destroyed', inject(function($document) {
+    var select = setupSelect('ng-model="val"');
+    openSelect(select);
+    waitForSelectOpen();
+    expect($document.find('md-select-menu').length).toBe(1);
+    select.scope().$destroy();
+    waitForSelectClose();
+    expect($document.find('md-select-menu').length).toBe(0);
+  }));
+
   it('errors for duplicate md-options, non-dynamic value', inject(function($rootScope) {
     expect(function() {
       setup('ng-model="$root.model"', '<md-option value="a">Hello</md-option>' +
@@ -489,13 +508,8 @@ describe('<md-select-menu>', function() {
 
   describe('aria', function() {
     var el;
-    beforeEach(inject(function($mdUtil, $q, $document) {
+    beforeEach(inject(function($q, $document) {
       el = setupSelect('ng-model="someModel"', [1, 2, 3]);
-      $mdUtil.transitionEndPromise = function() {
-        var deferred = $q.defer();
-        deferred.resolve();
-        return deferred.promise;
-      };
       var selectMenus = $document.find('md-select-menu');
       selectMenus.remove();
     }));
@@ -544,13 +558,6 @@ describe('<md-select-menu>', function() {
 
   describe('keyboard controls', function() {
 
-    beforeEach(inject(function($mdUtil, $q) {
-      $mdUtil.transitionEndPromise = function() {
-        var deferred = $q.defer();
-        deferred.resolve();
-        return deferred.promise;
-      };
-    }));
 
     afterEach(inject(function($document) {
       var selectMenus = $document.find('md-select-menu');