fix(datepicker): stop event bubbling from buttons

- Stop event bubbling from clicks in popup Closes #5400 Fixes #5347 BREAKING CHANGE: This requires $event to be passed in the second argument of the select function and in the close argument for the popup template
angular-ui · Feb 3, 2016 · e283cea · e283cea
1 parent 853d302
commit e283cea
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 7 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -939,7 +939,9 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
     }
   };
 
-  scope.select = function(date) {
+  scope.select = function(date, evt) {
+    evt.stopPropagation();
+
     if (date === 'today') {
       var today = new Date();
       if (angular.isDate(scope.date)) {
@@ -952,7 +954,9 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
     scope.dateSelection(date);
   };
 
-  scope.close = function() {
+  scope.close = function(evt) {
+    evt.stopPropagation();
+
     scope.isOpen = false;
     element[0].focus();
   };

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -1638,6 +1638,57 @@ describe('datepicker', function() {
       });
     });
 
+    describe('basic popup', function() {
+      var wrapElement, inputEl, dropdownEl;
+
+      function assignElements(wrapElement) {
+        inputEl = wrapElement.find('input');
+        dropdownEl = wrapElement.find('ul');
+        element = dropdownEl.find('table');
+      }
+
+      beforeEach(function() {
+        $rootScope.date = new Date('September 30, 2010 15:30:00');
+        $rootScope.isopen = true;
+        wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="isopen"></div>')($rootScope);
+        $rootScope.$digest();
+        assignElements(wrapElement);
+      });
+
+      it('should stop click event from bubbling from today button', function() {
+        var bubbled = false;
+        wrapElement.on('click', function() {
+          bubbled = true;
+        });
+
+        wrapElement.find('.uib-datepicker-current').trigger('click');
+
+        expect(bubbled).toBe(false);
+      });
+
+      it('should stop click event from bubbling from clear button', function() {
+        var bubbled = false;
+        wrapElement.on('click', function() {
+          bubbled = true;
+        });
+
+        wrapElement.find('.uib-clear').trigger('click');
+
+        expect(bubbled).toBe(false);
+      });
+
+      it('should stop click event from bubbling from close button', function() {
+        var bubbled = false;
+        wrapElement.on('click', function() {
+          bubbled = true;
+        });
+
+        wrapElement.find('.uib-close').trigger('click');
+
+        expect(bubbled).toBe(false);
+      });
+    });
+
     describe('ngModelOptions allowInvalid', function() {
       var $sniffer, inputEl;
 

diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
@@ -2,11 +2,11 @@
   <ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
     <li ng-transclude></li>
     <li ng-if="showButtonBar" class="uib-button-bar">
-    <span class="btn-group pull-left">
-      <button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
-      <button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
-    </span>
-      <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close()">{{ getText('close') }}</button>
+      <span class="btn-group pull-left">
+        <button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
+        <button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
+      </span>
+      <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
     </li>
   </ul>
 </div>