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

Commit 61bd95e

Browse files
bradrichkara
authored andcommitted
fix(panel): allow clickOutsideToClose to work with propagateContainerEvents (#9886)
Fixes #9388
1 parent d774b76 commit 61bd95e

File tree

2 files changed

+45
-8
lines changed

2 files changed

+45
-8
lines changed

src/components/panel/panel.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1847,23 +1847,33 @@ MdPanelRef.prototype._configureEscapeToClose = function() {
18471847
*/
18481848
MdPanelRef.prototype._configureClickOutsideToClose = function() {
18491849
if (this.config['clickOutsideToClose']) {
1850-
var target = this.panelContainer;
1851-
var sourceElem;
1850+
var target = this.config['propagateContainerEvents'] ?
1851+
angular.element(document.body) :
1852+
this.panelContainer;
1853+
var sourceEl;
18521854

18531855
// Keep track of the element on which the mouse originally went down
18541856
// so that we can only close the backdrop when the 'click' started on it.
1855-
// A simple 'click' handler does not work,
1856-
// it sets the target object as the element the mouse went down on.
1857+
// A simple 'click' handler does not work, it sets the target object as the
1858+
// element the mouse went down on.
18571859
var mousedownHandler = function(ev) {
1858-
sourceElem = ev.target;
1860+
sourceEl = ev.target;
18591861
};
18601862

18611863
// We check if our original element and the target is the backdrop
18621864
// because if the original was the backdrop and the target was inside the
18631865
// panel we don't want to panel to close.
18641866
var self = this;
18651867
var mouseupHandler = function(ev) {
1866-
if (sourceElem === target[0] && ev.target === target[0]) {
1868+
if (self.config['propagateContainerEvents']) {
1869+
1870+
// We check if the sourceEl of the event is the panel element or one
1871+
// of it's children. If it is not, then close the panel.
1872+
if (sourceEl !== self.panelEl[0] && !self.panelEl[0].contains(sourceEl)) {
1873+
self.close();
1874+
}
1875+
1876+
} else if (sourceEl === target[0] && ev.target === target[0]) {
18671877
ev.stopPropagation();
18681878
ev.preventDefault();
18691879

@@ -2744,6 +2754,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
27442754
}
27452755
};
27462756

2757+
27472758
/**
27482759
* Switches between 'start' and 'end'.
27492760
* @param {string} position Horizontal position of the panel
@@ -2933,6 +2944,7 @@ MdPanelAnimation.prototype.closeTo = function(closeTo) {
29332944
return this;
29342945
};
29352946

2947+
29362948
/**
29372949
* Specifies the duration of the animation in milliseconds.
29382950
* @param {number|{open: number, close: number}} duration
@@ -2958,6 +2970,7 @@ MdPanelAnimation.prototype.duration = function(duration) {
29582970
}
29592971
};
29602972

2973+
29612974
/**
29622975
* Returns the element and bounds for the animation target.
29632976
* @param {string|!Element|{top: number, left: number}} location

src/components/panel/panel.spec.js

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,20 @@ describe('$mdPanel', function() {
544544
expect(PANEL_EL).not.toExist();
545545
});
546546

547+
it('should close when clickOutsideToClose set to true and ' +
548+
'propagateContainerEvents is also set to true', function() {
549+
var config = {
550+
propagateContainerEvents: true,
551+
clickOutsideToClose: true
552+
};
553+
554+
openPanel(config);
555+
556+
clickPanelContainer(getElement('body'));
557+
558+
expect(PANEL_EL).not.toExist();
559+
});
560+
547561
it('should not close when escapeToClose set to false', function() {
548562
openPanel();
549563

@@ -3094,12 +3108,22 @@ describe('$mdPanel', function() {
30943108
attachedElements.push(element);
30953109
}
30963110

3097-
function clickPanelContainer() {
3111+
/**
3112+
* Returns the angular element associated with a CSS selector or element.
3113+
* @param el {string|!angular.JQLite|!Element}
3114+
* @returns {!angular.JQLite}
3115+
*/
3116+
function getElement(el) {
3117+
var queryResult = angular.isString(el) ? document.querySelector(el) : el;
3118+
return angular.element(queryResult);
3119+
}
3120+
3121+
function clickPanelContainer(container) {
30983122
if (!panelRef) {
30993123
return;
31003124
}
31013125

3102-
var container = panelRef.panelContainer;
3126+
container = container || panelRef.panelContainer;
31033127

31043128
container.triggerHandler({
31053129
type: 'mousedown',

0 commit comments

Comments
 (0)