Check out the testcase on codepen. The pen initially displays a Button ("nuke"), an IconButton and an attached Menu. Clicking the button removes the Button and just displays icon button and menu, causing react to unmount the menu at child position 3 and remount it at child position 2. On clicking the button, the debugger shows that an exception is thrown in the process.
The reason for this bug is that MDL does not clean the DOM when the element is downgraded, leaving react with the wrapper container as the direct child of the surrounding div (instead of the original ul). React then tries to unmount the ul from its supposed parent (the div), causing the exception to be thrown. A possible solution is to perform the cleanup in componentWillUnmount after downgrading. I can prepare a corresponing pull request.
Check out the testcase on codepen. The pen initially displays a
Button("nuke"), anIconButtonand an attachedMenu. Clicking the button removes theButtonand just displays icon button and menu, causing react to unmount the menu at child position 3 and remount it at child position 2. On clicking the button, the debugger shows that an exception is thrown in the process.The reason for this bug is that MDL does not clean the DOM when the element is downgraded, leaving react with the wrapper container as the direct child of the surrounding
div(instead of the originalul). React then tries to unmount theulfrom its supposed parent (thediv), causing the exception to be thrown. A possible solution is to perform the cleanup incomponentWillUnmountafter downgrading. I can prepare a corresponing pull request.