Material: menu: Invalid HTML for md-menu: Expected the menu to contain a `md-menu-content` element

[IMM0rtalis]

Actual Behavior:

• What is the issue?
  After updating I get the following exception Invalid HTML for md-menu: Expected the menu to contain amd-menu-contentelement (more detailed exception in the codepen). Before it was possible to have a wrapper around md-menu-content. Now it's throwing this error.
• What is the expected behavior?
  The expected behavior would be that i can wrap the md-menu-content into a wrapper-element (in my case it is a component which handle's the content itself). At least it should not break existing code when it is just a small release.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  https://codepen.io/anon/pen/XVQjzr
• Details:
  Throws error

"Error: Invalid HTML for md-menu: Expected the menu to contain a md-menu-content element.
n@https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js:16:6300
applyDirectivesToNode@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8920:22
compileNodes@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8320:15
compileNodes@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8332:15
compile@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8219:15
bootstrapApply/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1751:11
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:17229:16
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:17329:20
bootstrapApply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1749:9
invoke@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:4665:16
bootstrap/doBootstrap@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1747:5
bootstrap@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1767:12
angularInit@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1652:5
@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:30863:5
trigger@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:3166:7
defaultHandlerWrapper@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:3456:3
createEventHandler/eventHandler@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:3444:9
" "<md-menu class='md-menu'>"

AngularJS Versions: *

• AngularJS Version: 1.5.5 | 1.5.11
• AngularJS Material Version: 1.1.2 | 1.1.3 | 1.1.4 | 1.1.5 | 1.1.6

Additional Information:

• Browser Type: * tested with chromium & firefox
• Browser Version: * Version 56.0.2924.76 & 52.0.1 (64-bit)
• OS: * kubuntu

Does anybody know a workaround for that? or will there be a fix soon?

This happened when upgrading from 1.1.1 to 1.1.3.

Best,
Florian

Edit: i think this change in 1.1.2 breaks it: https://github.com/angular/material/commit/0b65e08e24fd017250e0637a96b445f25f76c754#diff-7f0c955b84cca6869bbb662eb0109d78R201

[IMM0rtalis]

@DevVersion do you have any idea?

[IMM0rtalis]

Since sb told me that you are still active at this project @crisbeto and @EladBezalel : any idea on this? I can also make a PR but the problem is I dont know what @DevVersion intention was with this.

[Splaktar]

@IMM0rtalis I checked out the CodePen in the OP but it seems to be a dialog with some buttons and no menu? Maybe just a copy and paste issue? I'd love to take a look at a CodePen with a reproduction and isolate this to a specific release (plus verify that it still exists in HEAD).

[Splaktar]

@DevVersion any chance that you have a few minutes to look at this regression?

[IMM0rtalis]

@Splaktar hmm.. the original CodePen I posted was completely nonsense. I updated it. I also tested it now with 1.1.4, 1.1.5 & 1.1.6 and since the change in 1.1.2 it is not working anymore (the cause of it is described in the OP)

Is it really needed to have this element-structure this strict (introduced in 1.1.2)? Atm I do not see the need of this restriction. And it prevents of customizing the menu-inner by components. Maybe @DevVersion knows why this was needed. If not I would think about creating a PR to revert this behavior.

[devversion]

@Splaktar @IMM0rtalis That's a valid point. Technically it's a breaking change, and the changes should be reverted partly.

The primary change in this _old_ PR was basically just that truthy check here. As an additional thing, it looked like I wanted to explicitly request users to place an md-menu-content element to avoid issues as in https://github.com/angular/material/issues/9709.

We can just revert the check that explicitly requests the second children to be a md-menu-content element. The other changes can be considered as fixes, that shouldn't be breaking.

[IMM0rtalis]

@Splaktar I created a PR for this issue. Can you update the labels here pls?
@DevVersion can you take a look over the PR? Should be no big deal.

[Splaktar]

Fixed in https://github.com/angular/material/commit/60e2393f915d808518c2cb10711a5fd6859b86e0.