From af0e5dc17837f30994099f0f278a28103d62bc8c Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Sat, 29 Aug 2015 11:50:26 -0700 Subject: [PATCH] fix(dropdown): fix display when using with append-to-body - Change to add `dropdown` class and open class to the `` 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 --- src/dropdown/dropdown.js | 12 ++++++++---- src/dropdown/test/dropdown.spec.js | 29 ++++++++++++++++++++++++----- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js index 8bcf04e221..ab698579de 100644 --- 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 index fd0d1d5cf3..31c92b355a 100644 --- 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('
    • ')($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);