[Ripples] - transition issues when view disposed

[chrismcv]

Hi,
So we're using react router, and one of our use cases it to use a new style IconMenu to do a this.context.router.transitionTo('somewhere_new').

What we're seeing is that if the View we transition to doesn't contain the IconMenu then we get
Uncaught TypeError: Cannot read property 'componentDidEnter' of undefined.

This is happening in ReactTransitionGroup

 _handleDoneEntering: function(key) {
    var component = this.refs[key];
    if (component.componentDidEnter) {
      component.componentDidEnter();
    }

    delete this.currentlyTransitioningKeys[key];

    var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
      this.props.children
    );

    if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
      // This was removed before it had fully entered. Remove it.
      this.performLeave(key);
    }
  },

I think it's because the Menu is being removed from the DOM before the transition completes.

We also have a custom "Popover" class with a "Close" button and we see the same behaviour in it.

Transitions are one of those areas I'm not massively sure about, so any guidance in how to fix would be great. I'll happily submit a PR, but will need a little steer.

Thanks,
Chris

[hai-cea]

@chrismcv I had a similar issue with componentWillLeave. To fix this, I think we should check if the component is mounted before issuing the callback even though the delay is 0. You can see that I do this in componentWillLeave - https://github.com/callemall/material-ui/blob/6c7b642424e36e8630b0e2f6ed905889e557564f/src/ripples/circle-ripple.jsx#L45

Here are the places where the same patch can be applied. Can you try it to see if it fixes the problem?
https://github.com/callemall/material-ui/blob/6c7b642424e36e8630b0e2f6ed905889e557564f/src/ripples/circle-ripple.jsx#L84
https://github.com/callemall/material-ui/blob/70e66940c1b8d0534a3a70f0db07429e3a05ce53/src/transition-groups/scale-in-child.jsx#L90
https://github.com/callemall/material-ui/blob/71dd04ad147e68900c43df9c5928623eade5754c/src/transition-groups/slide-in-child.jsx#L34

[THemming]

@hai-cea Thanks for the suggestion. I'm getting the same issue in material-ui v0.10.4. I tried the following patch locally in CircleRipple._initializeAnimation and it fixes the issue:

setTimeout(function() {
    if (this.isMounted()) callback();
}.bind(this), 0);

[oliviertassinari]

I'm experiencing the same error.