MaterialMenu use on dynamic website

[jh3y]

Overview of the Issue - if an error is being thrown a non-minified stack trace helps

Use of MaterialMenu in dynamic context I believe currently has a bug or needs a little documentation to clarify usage steps.

I'm not one 100% that I have the right approach but I am utilising componentHandler.upgradeElement on the ul element being used to store the menu.

On inspecting the DOM, it seems to be modified correctly as intended. However, the button used to open/close the menu seems to no longer be wired up. My assumption was that upgrade using MaterialMenu would search for the element with ID stated in the for attribute.

Is there a requirement to upgrade the button element also?

@jh3y

[addyosmani]

cc @jasonmayes @Garbee

[jh3y]

Poking around some of the code and reading other issues, the following will make a menu work on a dynamic set up.

componentHandler.upgradeDom('MaterialMenu', 'mdl-menu');

Although not specific to the added element, it is a current work around for cases where the behaviour is breaking an application.

[Garbee]

If you could provide a codepen of the exact setup that isn't working that would be great. It is kinda hard to walk through what the component handler is doing in different situations, especially with menu which I have yet to debug at all.

[jh3y]

I've experimented further with the placement of where I am calling the upgrade and I can confirm that I've got it working now so will close the issue.

@jh3y

[jasonmayes]

As a follow up, I believe in its current state if you are not using upgradeDom, then you would have to upgrade each.

[jh3y]

Currently, only upgrading the MaterialMenu element is required for it to work.

I think when needing to upgrade various elements, probably some kind of loop through an upgrade map could be a suitable solution or being able to pass in DOM fragments to upgradeDom.