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,30 +1723,53 @@ 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.
+        var found = findSourceEl(
+          self.panelEl.find(sourceEl.tagName),
+          sourceEl
+        );
+        if (!found && self.panelEl[0] !== sourceEl) {
+          self.close();
+        }
+
+      } else if (sourceEl === target[0] && ev.target === target[0]) {
         ev.stopPropagation();
         ev.preventDefault();
 
         self.close();
       }
     };
 
+    var findSourceEl = function(els, sourceEl) {
+      for (var el, i = 0; el = els[i]; i++) {
+        if (el === sourceEl) {
+          return true;
+        }
+      }
+      return false;
+    };
+
     // Add listeners
     target.on('mousedown', mousedownHandler);
     target.on('mouseup', mouseupHandler);
@@ -1884,6 +1909,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 +1940,7 @@ MdPanelRef.prototype.registerInterceptor = function(type, callback) {
   return this;
 };
 
+
 /**
  * Removes a registered interceptor.
  * @param {string} type Type of interceptor to be removed.
@@ -2606,6 +2633,7 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
   }
 };
 
+
 /**
  * Switches between 'start' and 'end'.
  * @param {string} position Horizontal position of the panel
@@ -2795,6 +2823,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 +2849,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 +3067,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 +3079,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);
+
+          clickPanelContainer(angular.element(document.body));
+
+          expect(PANEL_EL).not.toExist();
+        });
+
     it('should not close when escapeToClose set to false', function() {
       openPanel();
 
@@ -2823,12 +2837,12 @@ describe('$mdPanel', function() {
     attachedElements.push(element);
   }
 
-  function clickPanelContainer() {
+  function clickPanelContainer(container) {
     if (!panelRef) {
       return;
     }
 
-    var container = panelRef.panelContainer;
+    var container = container || panelRef.panelContainer;
 
     container.triggerHandler({
       type: 'mousedown',