fix(panel): allow clickOutsideToClose to work with propagateContainerEvents (#9886)

Fixes #9388

Author: bradrich

src/components/panel/panel.js

@@ -1847,23 +1847,33 @@ MdPanelRef.prototype._configureEscapeToClose = function() {
  */
 MdPanelRef.prototype._configureClickOutsideToClose = function() {
   if (this.config['clickOutsideToClose']) {
-    var target = this.panelContainer;
-    var sourceElem;
+    var target = this.config['propagateContainerEvents'] ?
+        angular.element(document.body) :
+        this.panelContainer;
+    var sourceEl;
 
     // 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.
+    // 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;
+      sourceEl = 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
     // panel we don't want to panel to close.
     var self = this;
     var mouseupHandler = function(ev) {
-      if (sourceElem === target[0] && ev.target === target[0]) {
+      if (self.config['propagateContainerEvents']) {
+
+        // We check if the sourceEl of the event is the panel element or one
+        // of it's children. If it is not, then close the panel.
+        if (sourceEl !== self.panelEl[0] && !self.panelEl[0].contains(sourceEl)) {
+          self.close();
+        }
+
+      } else if (sourceEl === target[0] && ev.target === target[0]) {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -2744,6 +2754,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
   }
 };
 
+
 /**
  * Switches between 'start' and 'end'.
  * @param {string} position Horizontal position of the panel
@@ -2933,6 +2944,7 @@ MdPanelAnimation.prototype.closeTo = function(closeTo) {
   return this;
 };
 
+
 /**
  * Specifies the duration of the animation in milliseconds.
  * @param {number|{open: number, close: number}} duration
@@ -2958,6 +2970,7 @@ MdPanelAnimation.prototype.duration = function(duration) {
   }
 };
 
+
 /**
  * Returns the element and bounds for the animation target.
  * @param {string|!Element|{top: number, left: number}} location

src/components/panel/panel.spec.js

@@ -544,6 +544,20 @@ describe('$mdPanel', function() {
       expect(PANEL_EL).not.toExist();
     });
 
+    it('should close when clickOutsideToClose set to true and ' +
+        'propagateContainerEvents is also set to true', function() {
+          var config = {
+            propagateContainerEvents: true,
+            clickOutsideToClose: true
+          };
+
+          openPanel(config);
+
+          clickPanelContainer(getElement('body'));
+
+          expect(PANEL_EL).not.toExist();
+        });
+
     it('should not close when escapeToClose set to false', function() {
       openPanel();
 
@@ -3094,12 +3108,22 @@ describe('$mdPanel', function() {
     attachedElements.push(element);
   }
 
-  function clickPanelContainer() {
+  /**
+   * Returns the angular element associated with a CSS selector or element.
+   * @param el {string|!angular.JQLite|!Element}
+   * @returns {!angular.JQLite}
+   */
+  function getElement(el) {
+    var queryResult = angular.isString(el) ? document.querySelector(el) : el;
+    return angular.element(queryResult);
+  }
+
+  function clickPanelContainer(container) {
     if (!panelRef) {
       return;
     }
 
-    var container = panelRef.panelContainer;
+    container = container || panelRef.panelContainer;
 
     container.triggerHandler({
       type: 'mousedown',