Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(dialog): Switched the click action to mouse down/up
Browse files Browse the repository at this point in the history 
Changed the click event to mousedown and mouseup so we can save the origin element on mouse down and close on mouseup if the origin and the target is the backdrop

fixes #3873. closes #4972.
  • Loading branch information
@EladBezalel @ThomasBurleson
EladBezalel authored and ThomasBurleson committed Oct 8, 2015
1 parent eae9eea commit 35e2f2a
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 11 deletions.
26 changes: 20 additions & 6 deletions src/components/dialog/dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -651,22 +651,36 @@ function MdDialogProvider($$interimElementProvider) {
}
if (options.clickOutsideToClose) {
var target = element;
var clickHandler = function(ev) {
// Only close if we click the flex container outside on the backdrop
if (ev.target === target[0]) {
var sourceElem;

// Keep track of the element on which the mouse originally went down
// so that we can only close the backdrop when the 'click' started on it.
// A simple 'click' handler does not work,
// it sets the target object as the element the mouse went down on.
var mousedownHandler = function(ev) {
sourceElem = ev.target;
};

// We check if our original element and the target is the backdrop
// because if the original was the backdrop and the target was inside the dialog
// we don't want to dialog to close.
var mouseupHandler = function(ev) {
if (sourceElem === target[0] && ev.target === target[0]) {
ev.stopPropagation();
ev.preventDefault();

smartClose();
}
};

// Add click listeners
target.on('click', clickHandler);
// Add listeners
target.on('mousedown', mousedownHandler);
target.on('mouseup', mouseupHandler);

// Queue remove listeners function
removeListeners.push(function() {
target.off('click', clickHandler);
target.off('mousedown', mousedownHandler);
target.off('mouseup', mouseupHandler);
});
}

Expand Down
96 changes: 91 additions & 5 deletions src/components/dialog/dialog.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ describe('$mdDialog', function() {
expect($document.activeElement).toBe(parent[0].querySelector('md-dialog-content'));
}));

it('should remove `md-dialog-container` on click and remove', inject(function($mdDialog, $rootScope, $timeout) {
it('should remove `md-dialog-container` on mousedown mouseup and remove', inject(function($mdDialog, $rootScope, $timeout) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

Expand All @@ -152,7 +152,11 @@ describe('$mdDialog', function() {

container = angular.element(parent[0].querySelector('.md-dialog-container'));
container.triggerHandler({
type: 'click',
type: 'mousedown',
target: container[0]
});
container.triggerHandler({
type: 'mouseup',
target: container[0]
});

Expand Down Expand Up @@ -290,7 +294,7 @@ describe('$mdDialog', function() {
expect($document.activeElement).toBe(parent[0].querySelector('.dialog-close'));
}));

it('should remove `md-dialog-container` after click outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
it('should remove `md-dialog-container` after mousedown mouseup outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

Expand All @@ -311,7 +315,11 @@ describe('$mdDialog', function() {

container = angular.element(parent[0].querySelector('.md-dialog-container'));
container.triggerHandler({
type: 'click',
type: 'mousedown',
target: container[0]
});
container.triggerHandler({
type: 'mouseup',
target: container[0]
});

Expand All @@ -322,6 +330,80 @@ describe('$mdDialog', function() {
expect(container.length).toBe(0);
}));

it('should not remove `md-dialog-container` after mousedown outside mouseup inside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

$mdDialog.show(
$mdDialog.confirm({
template: '<md-dialog>' +
'<md-dialog-content tabIndex="0">' +
'<p>Muppets are the best</p>' +
'</md-dialog-content>' +
'</md-dialog>',
parent: parent,
clickOutsideToClose: true,
ok: 'OK',
cancel: 'CANCEL'
})
);
runAnimation();

container = angular.element(parent[0].querySelector('.md-dialog-container'));
var content = angular.element(parent[0].querySelector('md-dialog-content'));
container.triggerHandler({
type: 'mousedown',
target: container[0]
});
content.triggerHandler({
type: 'mouseup',
target: content[0]
});

runAnimation();
runAnimation();

container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(1);
}));

it('should not remove `md-dialog-container` after mousedown inside mouseup outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');

$mdDialog.show(
$mdDialog.confirm({
template: '<md-dialog>' +
'<md-dialog-content tabIndex="0">' +
'<p>Muppets are the best</p>' +
'</md-dialog-content>' +
'</md-dialog>',
parent: parent,
clickOutsideToClose: true,
ok: 'OK',
cancel: 'CANCEL'
})
);
runAnimation();

container = angular.element(parent[0].querySelector('.md-dialog-container'));
var content = angular.element(parent[0].querySelector('md-dialog-content'));
content.triggerHandler({
type: 'mousedown',
target: content[0]
});
container.triggerHandler({
type: 'mouseup',
target: container[0]
});

runAnimation();
runAnimation();

container = angular.element(parent[0].querySelector('.md-dialog-container'));
expect(container.length).toBe(1);
}));

it('should remove `md-dialog-container` after ESCAPE key', inject(function($mdDialog, $rootScope, $timeout, $mdConstant) {
jasmine.mockElementFocus(this);
var container, parent = angular.element('<div>');
Expand Down Expand Up @@ -569,7 +651,11 @@ describe('$mdDialog', function() {
expect(parent.find('md-dialog').length).toBe(1);

container.triggerHandler({
type: 'click',
type: 'mousedown',
target: container[0]
});
container.triggerHandler({
type: 'mouseup',
target: container[0]
});
runAnimation();
Expand Down

0 comments on commit 35e2f2a

Please sign in to comment.