Material: <md-button> throws an error when used inside <md-menu-bar>

[cmacdonnacha]

Here's a code pen. Look at the console window on your browser to see the error.

Issue does not occur when using "button", only occurs when using "md-button".
Issue does not occur if I remove "md-menu-bar" and just use "md-menu".

This error is thrown in the console window:

TypeError: Cannot read property 'setAttribute' of null
    at https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js:14:114
    at Object.forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:340:20)
    at Object.compile (https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-    material.min.js:13:31950)
    at applyDirectivesToNode (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:8121:32)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:7654:15)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:7666:15)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:7666:15)
    at compile (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:7553:15)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:1681:11
    at Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:16052:28) <md-    menu-bar role="menubar">

[ThomasBurleson]

@rschmukler - Can you explain why mbButton is not supported as child on <md-menu>; yet it is supported as a child of <md-menu-item>?

I think this needs to be documented also.

[shairez]

A workaround for the time being is to use - <button class="md-button" ...

[dpatinor]

I have the same error, only it happens in 'md-menu-bar -> md-menu -> md-button'.

Thanks for the temporary solution.

[kkatzer]

I have the same error, but the workaround suggested by @shairez breaks the css style.

[Miguelme]

Same issue here!

[arjundas]

Same Issue

[homerjam]

+1

[bobmcallan]

+1

[stidiovip]

I have the same issue. What I want to do is to hide the menu when clicked.

[chrisconover]

I have this issue as well. I found that wrapping your <md-button> in an <a> solves the console error and maintains the appropriate styles. It's not semantic, but hopefully it will hold people over until a proper fix can be implemented.

<a>
  <md-button class="md-icon-button"
                     ng-click="$mdOpenMenu()">
  <md-icon md-svg-src=""></md-icon>
  </md-button>
</a>

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.