fix(dropdown): fix display when using with append-to-body

wesleycho · wesleycho · commit bf63cef0aa60 · 2015-08-30T15:20:16.000-07:00
- Change to add `dropdown` class and open class to the `<body>` element BREAKING CHANGE: This differs from the existing behavior in that it no longer will toggle based on the existing `dropdown` directive element, but on the `body` element instead Closes #4305 Fixes #4240
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -74,8 +74,9 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     setIsOpen = angular.noop,
     toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
     appendToBody = false,
-    keynavEnabled =false,
-    selectedOption = null;
+    keynavEnabled = false,
+    selectedOption = null,
+    body = $document.find('body');
 
   this.init = function(element) {
     self.$element = element;
@@ -93,7 +94,8 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     keynavEnabled = angular.isDefined($attrs.keyboardNav);
 
     if (appendToBody && self.dropdownMenu) {
-      $document.find('body').append(self.dropdownMenu);
+      body.append(self.dropdownMenu);
+      body.addClass('dropdown');
       element.on('$destroy', function handleDestroyEvent() {
         self.dropdownMenu.remove();
       });
@@ -184,7 +186,9 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       self.dropdownMenu.css(css);
     }
 
-    $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass).then(function() {
+    var openContainer = appendToBody ? body : self.$element;
+
+    $animate[isOpen ? 'addClass' : 'removeClass'](openContainer, openClass).then(function() {
       if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
         toggleInvoker($scope, { open: !!isOpen });
       }
diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
@@ -224,11 +224,29 @@ describe('dropdownToggle', function() {
       expect($document.find('#dropdown-menu').parent()[0]).toBe($document.find('body')[0]);
     });
 
+    it('adds the dropdown class to the body', function() {
+      expect($document.find('body').hasClass('dropdown')).toBe(true);
+    });
+
     it('removes the menu when the dropdown is removed', function() {
       element.remove();
       $rootScope.$digest();
       expect($document.find('#dropdown-menu').length).toEqual(0);
     });
+
+    it('toggles the open class on body', function() {
+      var body = $document.find('body');
+
+      expect(body.hasClass('open')).toBe(false);
+
+      element.find('[dropdown-toggle]').click();
+
+      expect(body.hasClass('open')).toBe(true);
+
+      element.find('[dropdown-toggle]').click();
+
+      expect(body.hasClass('open')).toBe(false);
+    });
   });
 
   describe('integration with $location URL rewriting', function() {
@@ -437,11 +455,12 @@ describe('dropdownToggle', function() {
       it('should work with dropdown-append-to-body', function() {
         element = $compile('<li dropdown dropdown-append-to-body auto-close="outsideClick"><a href dropdown-toggle></a><ul class="dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
         clickDropdownToggle();
-        expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+        var body = $document.find('body');
+        expect(body.hasClass(dropdownConfig.openClass)).toBe(true);
         $document.find('#dropdown-menu').find('li').eq(0).trigger('click');
-        expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+        expect(body.hasClass(dropdownConfig.openClass)).toBe(true);
         $document.click();
-        expect(element.hasClass(dropdownConfig.openClass)).toBe(false);
+        expect(body.hasClass(dropdownConfig.openClass)).toBe(false);
       });
     });
 
@@ -657,7 +676,7 @@ describe('dropdownToggle', function() {
 
       triggerKeyDown(element, 40);
 
-      expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+      expect($document.find('body').hasClass(dropdownConfig.openClass)).toBe(true);
       var focusEl = $document.find('ul').eq(0).find('a');
       expect(isFocused(focusEl)).toBe(true);
     });
@@ -667,7 +686,7 @@ describe('dropdownToggle', function() {
       triggerKeyDown(element, 40);
       triggerKeyDown(element, 40);
 
-      expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+      expect($document.find('body').hasClass(dropdownConfig.openClass)).toBe(true);
       var elem1 = $document.find('ul');
       var elem2 = elem1.find('a');
       var focusEl = $document.find('ul').eq(0).find('a').eq(1);
