Menu items get broken after update

[vitalets]

I've created component that renders Menu with 3 items ['a', 'b', 'c'] from state.
That works fine.
Then I update component state items to ['a', 'x', 'y']. Component re-renders menu, but updated items are broken - they does not hide after click.

Please have a look on codepen for that:
http://codepen.io/anon/pen/gwwKvk?editors=0011

[tleunen]

Thanks for reporting the issue, I'll try to take a look in the next few days

[DirtyHairy]

We stumbled over this issue today, too 😏

This bug comes from the fact that the MDL component handler adds click handler on all menu items that are present in the DOM when the component is upgraded. Any changes to the item set that occur later are not tracked by the handler, and thus additional items don't get the necessary listener attached.

We managed to hack around this by adding a key to the menu that changes when the set of items changes, forcing react to unmount and re-render the component. However, this is complicated by #426 which causes an error to be thrown in the process.

@tleunen , if you like, I can prepare a pull request that provides a DynamicMenu component that automagically calculates a matching key based on the set of child nodes (that's what we came up with). Of course, the prerequesite is fixing #426 ... 😃 (I can also provide a PR for that).