Merge pull request #7 from InteractiveIntelligence/configurable-appen…

…d-to-body feat(dropdown): make dropdown-append-to-body configurable
GenesysPureConnect · Dec 10, 2016 · 79ec214 · 79ec214
2 parents 2589e06 + 59365fc
commit 79ec214
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 26 deletions.
diff --git a/src/dropdown/docs/readme.md b/src/dropdown/docs/readme.md
@@ -25,7 +25,7 @@ Each of these parts need to be used as attribute directives.
 * `dropdown-append-to-body`
   <small class="badge">B</small>
   _(Default: `false`)_ -
-  Appends the inner dropdown-menu to the body element.
+  Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non `false` value.
 
 * `is-open`
   <small class="badge">$</small>

diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -112,7 +112,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       }
     }
 
-    appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
+    if (angular.isDefined($attrs.dropdownAppendToBody)) {
+      var appendToBodyValue = $parse($attrs.dropdownAppendToBody)(scope);
+      if (appendToBodyValue !== false) {
+        appendToBody = true;
+      }
+    }
     keynavEnabled = angular.isDefined($attrs.keyboardNav);
 
     if (appendToBody && !appendTo) {

diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
@@ -215,38 +215,114 @@ describe('uib-dropdown', function() {
   });
 
   describe('using dropdown-append-to-body', function() {
-    function dropdown() {
-      return $compile('<li uib-dropdown dropdown-append-to-body><a href uib-dropdown-toggle></a><ul uib-dropdown-menu id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
-    }
+    describe('with no value', function() {
+      function dropdown() {
+        return $compile('<li uib-dropdown dropdown-append-to-body><a href uib-dropdown-toggle></a><ul uib-dropdown-menu id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
+      }
 
-    beforeEach(function() {
-      element = dropdown();
-      $document.find('body').append(element);
-    });
+      beforeEach(function() {
+        element = dropdown();
+        $document.find('body').append(element);
+      });
 
-    afterEach(function() {
-      element.remove();
-    });
+      afterEach(function() {
+        element.remove();
+      });
 
-    it('adds the menu to the body', function() {
-      expect($document.find('#dropdown-menu').parent()[0]).toBe($document.find('body')[0]);
-    });
+      it('adds the menu to the body', function() {
+        expect($document.find('#dropdown-menu').parent()[0]).toBe($document.find('body')[0]);
+      });
 
-    it('focuses the dropdown element on close', function() {
-      var toggle = element.find('[uib-dropdown-toggle]');
-      var menu = $document.find('#dropdown-menu a');
-      toggle.trigger('click');
-      menu.focus();
+      it('focuses the dropdown element on close', function() {
+        var toggle = element.find('[uib-dropdown-toggle]');
+        var menu = $document.find('#dropdown-menu a');
+        toggle.trigger('click');
+        menu.focus();
 
-      menu.trigger('click');
+        menu.trigger('click');
 
-      expect(document.activeElement).toBe(toggle[0]);
+        expect(document.activeElement).toBe(toggle[0]);
+      });
+
+      it('removes the menu when the dropdown is removed', function() {
+        element.remove();
+        $rootScope.$digest();
+        expect($document.find('#dropdown-menu').length).toEqual(0);
+      });
     });
 
-    it('removes the menu when the dropdown is removed', function() {
-      element.remove();
-      $rootScope.$digest();
-      expect($document.find('#dropdown-menu').length).toEqual(0);
+    describe('with a value', function() {
+      function dropdown() {
+        return $compile('<li uib-dropdown dropdown-append-to-body="appendToBody"><a href uib-dropdown-toggle></a><ul uib-dropdown-menu id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
+      }
+      describe('that is not false', function() {
+        beforeEach(function() {
+          $rootScope.appendToBody = 'sure';
+
+          element = dropdown();
+          $document.find('body').append(element);
+        });
+
+        afterEach(function() {
+          element.remove();
+        });
+
+        it('adds the menu to the body', function() {
+          expect($document.find('#dropdown-menu').parent()[0]).toBe($document.find('body')[0]);
+        });
+
+        it('focuses the dropdown element on close', function() {
+          var toggle = element.find('[uib-dropdown-toggle]');
+          var menu = $document.find('#dropdown-menu a');
+          toggle.trigger('click');
+          menu.focus();
+
+          menu.trigger('click');
+
+          expect(document.activeElement).toBe(toggle[0]);
+        });
+
+        it('removes the menu when the dropdown is removed', function() {
+          element.remove();
+          $rootScope.$digest();
+          expect($document.find('#dropdown-menu').length).toEqual(0);
+        });
+      });
+
+      describe('that is false', function() {
+        beforeEach(function() {
+          $rootScope.appendToBody = false;
+
+          element = dropdown();
+          $document.find('body').append(element);
+        });
+
+        afterEach(function() {
+          element.remove();
+        });
+
+        it('does not add the menu to the body', function() {
+          expect($document.find('#dropdown-menu').parent()[0]).not.toBe($document.find('body')[0]);
+        });
+
+        it('focuses the dropdown element on close', function() {
+          var toggle = element.find('[uib-dropdown-toggle]');
+          var menu = $document.find('#dropdown-menu a');
+          toggle.trigger('click');
+          menu.focus();
+
+          menu.trigger('click');
+
+          expect(document.activeElement).toBe(toggle[0]);
+        });
+
+        it('removes the menu when the dropdown is removed', function() {
+          element.remove();
+          $rootScope.$digest();
+          expect($document.find('#dropdown-menu').length).toEqual(0);
+        });
+      });
+
     });
   });