search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

Menu items get broken after update #400

Open vitalets opened 7 years ago

vitalets commented 7 years ago

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 commented 7 years ago

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

DirtyHairy commented 7 years ago

We stumbled over this issue today, too :smirk:

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 ... :smiley: (I can also provide a PR for that).