Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

fix(datepicker): stop event bubbling from buttons #5400

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/datepicker/datepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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();
};
Expand Down
51 changes: 51 additions & 0 deletions src/datepicker/test/datepicker.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
10 changes: 5 additions & 5 deletions template/datepicker/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

formatting tool went awry?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was me fixing the indentation

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooooooh. ok. i couldn't see it before. sorry.

<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>