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>'