fix(panel): Allow clickOutsideToClose to work with propagateContainerEvents

If both the `clickOutsideToClose` and `propagateContainerEvents`
parameters are set to true within the panel configuration, then the
panel will be closed when a click happens outside of the panel.

Fixes #9388

Author: bradrich

src/components/panel/panel.js

@@ -14,6 +14,7 @@ angular
  *                            PUBLIC DOCUMENTATION                           *
  *****************************************************************************/
 
+
 /**
  * @ngdoc service
  * @name $mdPanel
@@ -685,6 +686,7 @@ angular
  *                               MdPanelAnimation                            *
  *****************************************************************************/
 
+
 /**
  * @ngdoc type
  * @name MdPanelAnimation
@@ -1721,13 +1723,15 @@ MdPanelRef.prototype._configureEscapeToClose = function() {
  */
 MdPanelRef.prototype._configureClickOutsideToClose = function() {
   if (this.config['clickOutsideToClose']) {
-    var target = this.panelContainer;
+    var target = this.config['propagateContainerEvents'] ?
+        angular.element(document.body) :
+        this.panelContainer;
     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.
+    // 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;
     };
@@ -1737,14 +1741,36 @@ MdPanelRef.prototype._configureClickOutsideToClose = function() {
     // 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 sourceElem of the event is the panel element or one
+        // of it's children. If it is not, then close the panel.
+        var found = findSourceElem(
+          self.panelEl.find(sourceElem.tagName),
+          sourceElem
+        );
+        if (!found && self.panelEl[0] !== sourceElem) {
+          self.close();
+        }
+
+      } else if (sourceElem === target[0] && ev.target === target[0]) {
         ev.stopPropagation();
         ev.preventDefault();
 
         self.close();
       }
     };
 
+    var findSourceElem = function(elems, sourceElem) {
+      var found = false;
+      angular.forEach(elems, function(elem) {
+        if (elem === sourceElem) {
+          found = true;
+        }
+      });
+      return found;
+    };
+
     // Add listeners
     target.on('mousedown', mousedownHandler);
     target.on('mouseup', mouseupHandler);
@@ -1884,6 +1910,7 @@ MdPanelRef.prototype._animateClose = function() {
   });
 };
 
+
 /**
  * Registers a interceptor with the panel. The callback should return a promise,
  * which will allow the action to continue when it gets resolved, or will
@@ -1914,6 +1941,7 @@ MdPanelRef.prototype.registerInterceptor = function(type, callback) {
   return this;
 };
 
+
 /**
  * Removes a registered interceptor.
  * @param {string} type Type of interceptor to be removed.
@@ -2606,6 +2634,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
   }
 };
 
+
 /**
  * Switches between 'start' and 'end'.
  * @param {string} position Horizontal position of the panel
@@ -2795,6 +2824,7 @@ MdPanelAnimation.prototype.closeTo = function(closeTo) {
   return this;
 };
 
+
 /**
  * Specifies the duration of the animation in milliseconds.
  * @param {number|{open: number, close: number}} duration
@@ -2820,6 +2850,7 @@ MdPanelAnimation.prototype.duration = function(duration) {
   }
 };
 
+
 /**
  * Returns the element and bounds for the animation target.
  * @param {string|!Element|{top: number, left: number}} location
@@ -3037,6 +3068,7 @@ MdPanelAnimation.prototype._getBoundingClientRect = function(element) {
  *                                Util Methods                               *
  *****************************************************************************/
 
+
 /**
  * Returns the angular element associated with a css selector or element.
  * @param el {string|!angular.JQLite|!Element}
@@ -3048,6 +3080,7 @@ function getElement(el) {
   return angular.element(queryResult);
 }
 
+
 /**
  * Gets the computed values for an element's translateX and translateY in px.
  * @param {!angular.JQLite|!Element} el

src/components/panel/panel.spec.js

@@ -542,6 +542,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);
+
+          clickOutsideOfPanel();
+
+          expect(PANEL_EL).not.toExist();
+        });
+
     it('should not close when escapeToClose set to false', function() {
       openPanel();
 
@@ -2843,6 +2857,26 @@ describe('$mdPanel', function() {
     flushPanel();
   }
 
+  function clickOutsideOfPanel() {
+    if (!panelRef) {
+      return;
+    }
+
+    var body = angular.element(document.body);
+
+    body.triggerHandler({
+      type: 'mousedown',
+      target: body[0]
+    });
+
+    body.triggerHandler({
+      type: 'mouseup',
+      target: body[0]
+    });
+
+    flushPanel();
+  }
+
   function pressEscape() {
     if (!panelRef) {
       return;