feat(menu): do not propagate event in mdOpenMenu

Do not propagate the event in mdOpenMenu. This way a menu can be nested in elements that also have handlers of the same event type, without triggering any of these events. To enable this functionality, `$event` should be passed as the first argument to `$mdOpenMenu`. Fixes #3296. Closes #3332.
angular · Jun 18, 2015 · b8045df · b8045df
1 parent 62f5c7b
commit b8045df
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git a/src/components/menu/_menu.js b/src/components/menu/_menu.js
@@ -22,8 +22,9 @@ angular.module('material.components.menu', [
  *
  * Every `md-menu` must specify exactly two child elements. The first element is what is
  * left in the DOM and is used to open the menu. This element is called the trigger element.
- * The trigger element's scope has access to `$mdOpenMenu()`
- * which it may call to open the menu.
+ * The trigger element's scope has access to `$mdOpenMenu($event)`
+ * which it may call to open the menu. By passing $event as argument, the
+ * corresponding event is stopped from propagating up the DOM-tree.
  *
  * The second element is the `md-menu-content` element which represents the
  * contents of the menu when it is open. Typically this will contain `md-menu-item`s,
@@ -32,7 +33,7 @@ angular.module('material.components.menu', [
  * <hljs lang="html">
  * <md-menu>
  *  <!-- Trigger element is a md-button with an icon -->
- *  <md-button ng-click="$mdOpenMenu()" class="md-icon-button" aria-label="Open sample menu">
+ *  <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="Open sample menu">
  *    <md-icon md-svg-icon="call:phone"></md-icon>
  *  </md-button>
  *  <md-menu-content>
@@ -74,7 +75,7 @@ angular.module('material.components.menu', [
  *
  * <hljs lang="html">
  * <md-menu>
- *  <md-button ng-click="$mdOpenMenu()" class="md-icon-button" aria-label="Open some menu">
+ *  <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="Open some menu">
  *    <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
  *  </md-button>
  *  <md-menu-content>
@@ -117,7 +118,7 @@ angular.module('material.components.menu', [
  * @usage
  * <hljs lang="html">
  * <md-menu>
- *  <md-button ng-click="$mdOpenMenu()" class="md-icon-button">
+ *  <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button">
  *    <md-icon md-svg-icon="call:phone"></md-icon>
  *  </md-button>
  *  <md-menu-content>
@@ -190,7 +191,9 @@ function MenuController($mdMenu, $attrs, $element, $scope) {
   };
 
   // Uses the $mdMenu interim element service to open the menu contents
-  this.open = function openMenu() {
+  this.open = function openMenu(ev) {
+    ev && ev.stopPropagation();
+
     ctrl.isOpen = true;
     triggerElement.setAttribute('aria-expanded', 'true');
     $mdMenu.show({

diff --git a/src/components/menu/demoBasicUsage/index.html b/src/components/menu/demoBasicUsage/index.html
@@ -4,7 +4,7 @@
     <h2 class="md-title">Simple dropdown menu</h2>
     <p>Note that applying the <code>md-menu-origin</code> and <code>md-menu-align-target</code> attributes ensure that the menu elements align</p>
     <md-menu>
-      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
         <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
       </md-button>
       <md-menu-content width="4">

diff --git a/src/components/menu/demoMenuPositionModes/index.html b/src/components/menu/demoMenuPositionModes/index.html
@@ -7,7 +7,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Target Mode Positioning (default)</p>
         <md-menu>
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon md-menu-origin md-svg-icon="call:business"></md-icon>
           </md-button>
           <md-menu-content width="6">
@@ -23,7 +23,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
       <div layout="column" flex-sm="100" flex="33" layout-align="center center">
         <p>Target mode with <code>md-offset</code></p>
         <md-menu md-offset="0 -5">
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon md-menu-origin md-svg-icon="call:ring-volume"></md-icon>
           </md-button>
           <md-menu-content width="4">
@@ -36,7 +36,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
       <div layout="column" flex-sm="100" flex="33" layout-align="center center">
         <p><code>md-position-mode="target-right target"</code></p>
         <md-menu md-position-mode="target-right target">
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon md-menu-origin md-svg-icon="call:portable-wifi-off"></md-icon>
           </md-button>
           <md-menu-content width="4">

diff --git a/src/components/menu/demoMenuWidth/index.html b/src/components/menu/demoMenuWidth/index.html
@@ -6,7 +6,7 @@ <h2 class="md-title">Different Widths</h2>
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Wide menu (<code>width=6</code>)</p>
         <md-menu md-offset="0 -7">
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
           </md-button>
           <md-menu-content width="6">
@@ -19,7 +19,7 @@ <h2 class="md-title">Different Widths</h2>
       <div layout="column" flex-sm="100" flex="33" layout-align="center center">
         <p>Medium menu (<code>width=4</code>)</p>
         <md-menu md-offset="0 -7">
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon md-menu-origin md-svg-icon="call:email"></md-icon>
           </md-button>
           <md-menu-content width="4">
@@ -32,7 +32,7 @@ <h2 class="md-title">Different Widths</h2>
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Small menu (<code>width=2</code>)</p>
         <md-menu md-offset="0 -7">
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon md-menu-origin md-svg-icon="call:chat"></md-icon>
           </md-button>
           <md-menu-content width="2">

diff --git a/src/components/menu/menu.spec.js b/src/components/menu/menu.spec.js
@@ -15,7 +15,7 @@ describe('md-menu directive', function() {
     inject(function($compile, $rootScope) {
       menu = $compile([
         '<md-menu>',
-          '<button ng-click="$mdOpenMenu()">Hello World</button>',
+          '<button ng-click="$mdOpenMenu($event)">Hello World</button>',
           '<md-menu-content>',
             '<li><md-button ng-click="doSomething()"></md-button></li>',
           '</md-menu-content>'