Merge pull request #68 from kerryj89/patch-1

Fix keyboard navigation in dropdown

CHANGELOG.md

@@ -1,3 +1,13 @@
+<a name="3.0.7"></a>
+## [3.0.7](https://github.com/morgul/ui-bootstrap4/compare/v3.0.5...v3.0.7) (2020-11-19)
+
+
+
+<a name="3.0.6"></a>
+## [3.0.6](https://github.com/morgul/ui-bootstrap4/compare/v3.0.5...v3.0.6) (2018-12-04)
+
+
+
 <a name="3.0.5"></a>
 ## [3.0.5](https://github.com/morgul/ui-bootstrap4/compare/v3.0.4...v3.0.5) (2018-10-04)
 

docs/index.html

@@ -2845,6 +2845,10 @@ Optional suffix of modal window class. The value used is appended to the <code>m
 (<i>Note: Since this is directly injected into the class for the modal, you can leverage additional Bootstrap modal classes, such as <code>modal-dialog-centered</code>.
 Ex: <code>md modal-dialog-centered</code>.</i>)</p>
 </li>
+<li><p><code>scrollable</code>
+  <em>(Type: <code>boolean</code>, Default: <code>false</code>)</em> -
+  Indicates whether the dialog will allow its content to scroll. If set to true, this will add the class 'modal-dialog-scrollable' to the rendered modal. </p>
+</li>
 <li><p><code>template</code>
 <em>(Type: <code>string</code>)</em> -
 Inline template representing the modal&#39;s content.</p>

package.json

@@ -1,7 +1,7 @@
 {
   "author": "https://github.com/morgul/ui-bootstrap4/graphs/contributors",
   "name": "ui-bootstrap4",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Native AngularJS (Angular) directives for Bootstrap",
   "homepage": "http://morgul.github.io/ui-bootstrap4/",
   "keywords": [
@@ -24,7 +24,8 @@
   "scripts": {
     "serve": "static dist -p 3857 -a 0.0.0.0 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'",
     "demo": "grunt html2js after-test && static dist -p 3857 -a 0.0.0.0 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'",
-    "test": "grunt"
+    "test": "grunt",
+    "grunt": "grunt --"
   },
   "repository": {
     "type": "git",

src/dropdown/dropdown.js

@@ -194,8 +194,8 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
 
   scope.focusDropdownEntry = function(keyCode) {
     var elems = self.dropdownMenu ? //If append to body is used.
-      angular.element(self.dropdownMenu).find('.dropdown-item') :
-      $element.find('div').eq(0).find('a.');
+      angular.element(self.dropdownMenu[0].querySelectorAll('.dropdown-item')) :
+      angular.element($element[0].querySelectorAll('div .dropdown-item'));
 
     switch (keyCode) {
       case 40: {

src/modal/modal.js

@@ -102,6 +102,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
       link: function(scope, element, attrs) {
         element.addClass(attrs.windowTopClass || '');
         scope.size = attrs.size;
+        scope.scrollable = attrs.scrollable === 'true';
 
         scope.close = function(evt) {
           var modal = $modalStack.getTop();
@@ -425,7 +426,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
           openedClass: modal.openedClass,
           windowTopClass: modal.windowTopClass,
           animation: modal.animation,
-          appendTo: modal.appendTo
+          appendTo: modal.appendTo,
+          scrollable: modal.scrollable
         });
 
         openedClasses.put(modalBodyClass, modalInstance);
@@ -484,6 +486,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
           'aria-labelledby': modal.ariaLabelledBy,
           'aria-describedby': modal.ariaDescribedBy,
           'size': modal.size,
+          'scrollable': modal.scrollable,
           'index': topModalIndex,
           'animate': 'animate',
           'ng-style': '{\'z-index\': 1050 + $$topModalIndex*10, display: \'block\'}',
@@ -665,7 +668,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
       options: {
         animation: true,
         backdrop: true, //can also be false or 'static'
-        keyboard: true
+        keyboard: true,
+        scrollable: false
       },
       $get: ['$rootScope', '$q', '$document', '$templateRequest', '$controller', '$uibResolve', '$uibModalStack',
         function ($rootScope, $q, $document, $templateRequest, $controller, $uibResolve, $modalStack) {
@@ -763,6 +767,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
                   ariaLabelledBy: modalOptions.ariaLabelledBy,
                   ariaDescribedBy: modalOptions.ariaDescribedBy,
                   size: modalOptions.size,
+                  scrollable: modalOptions.scrollable,
                   openedClass: modalOptions.openedClass,
                   appendTo: modalOptions.appendTo
                 };

src/modal/test/modal.spec.js

@@ -1389,6 +1389,29 @@ describe('$uibModal', function() {
       });
     });
 
+    describe('scrollable', function() {
+      it('should default to false', function() {
+        open({
+          template: '<div>Non scollable modal dialog</div>'
+        });
+        
+        expect($document.find('div.modal-dialog')).not.toHaveClass('modal-dialog-scrollable');
+      });
+      it('should add the scrollable class if scrollable set to true', function() {
+        open({
+          template: '<div>Large modal dialog</div>',
+          scrollable: true
+        });
+
+        expect($document.find('div.modal-dialog')).toHaveClass('modal-dialog-scrollable');
+      });
+      it('should allow overriding default options in a provider', function() {
+        $uibModalProvider.options.scrollable = true;
+        open({template: '<div>Content</div>'});
+        expect($document.find('div.modal-dialog')).toHaveClass('modal-dialog-scrollable');
+      });
+    });
+
     describe('animation', function() {
       it('should have animation fade classes by default', function() {
         open({

src/tooltip/tooltip.js

@@ -162,7 +162,8 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
               if (!positionTimeout) {
                 positionTimeout = $timeout(function() {
                   var placementClasses = $position.parsePlacement(ttScope.placement);
-                  var placement = placementClasses[1] === 'center' ? placementClasses[0] : placementClasses[0] + '-' + placementClasses[1];
+                  var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody, true);
+                  var placement = ttPosition.placement;
 				  
                   // need to add classes prior to placement to allow correct tooltip width calculations
                   if (!tooltip.hasClass(placementClasses[0])) {
@@ -176,7 +177,6 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
                   }
                   
                   // Take into account tooltup margins, since boostrap css draws tooltip arrow inside margins
-                  var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody, true);
                   var initialHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');
                   var elementPos = appendToBody ? $position.offset(element) : $position.position(element);
                   tooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' });

template/modal/window.html

@@ -1 +1 @@
-<div class="modal-dialog {{size ? 'modal-' + size : ''}}"><div class="modal-content" uib-modal-transclude></div></div>
+<div class="modal-dialog {{size ? 'modal-' + size : ''}} {{scrollable ? 'modal-dialog-scrollable': ''}}"><div class="modal-content" uib-modal-transclude></div></div>