Material-design-lite: v2 simple menu - be able to cancel animation on closing or register a callback on animation end

Created on 3 Dec 2016 · 6Comments · Source: google/material-design-lite

I am using the Simple Menu. One of my menu item is a logout button which wipes out the page completely (using React). So the menu gets unloaded but the foundation keeps animating it resulting in an error "Cannot read property 'style' of undefined" (_this.refs.root.style[(0, _util.getTransformPropertyName)(window)] = 'scale(' + x + ', ' + y + ')';)

So what I did is I wait 350ms after receiving the selected event (waiting for the menu to completely close) before really logging out and unload the component.

I tried to destroy the menu before logging out to no avail.

bug in-tracker

Source

mikegleasonjr

All 6 comments

Hmm, this definitely sounds like a bug. Usually we ask for a CodePen/Plunker repro'ing the issue but seeing as we don't yet provide any built assets for MDLv2, I understand how that's difficult.

Looks like this code might be the culprit, since we're not cancelling this queued animation frame on destroy. @sgomes wdyt?

traviskaufman on 3 Dec 2016

👍1

BTW I know I'm using alpha software but I couldn't resist using the modular components for a project of mine. I will investigate before opening bugs to minimize the noise. Is there a channel or a place more appropriate to validate things like that before opening something?

mikegleasonjr on 3 Dec 2016

As I mentioned in a previous issue, if you want to create a reproducible test case for the issue using this plunker template that would be ideal for us, and it would help us automatically verify the bug. Idt it's necessary for this case as we've verified it already on our end, but in the future it's super useful.

Also, thanks for trying out our v2 components! Early feedback like this is much appreciated.

traviskaufman on 5 Dec 2016

👍1

Yes, this looks like a potential new class of bug that we haven't accounted for, where long-running tasks are making changes to the DOM without verifying that it's still there. Thanks, @mikegleasonjr!