diff --git a/src/addons/transitions/ReactCSSTransitionGroupChild.js b/src/addons/transitions/ReactCSSTransitionGroupChild.js index 170cb9d87d67..0412895ba468 100644 --- a/src/addons/transitions/ReactCSSTransitionGroupChild.js +++ b/src/addons/transitions/ReactCSSTransitionGroupChild.js @@ -89,7 +89,7 @@ var ReactCSSTransitionGroupChild = React.createClass({ CSSCore.addClass(node, className); // Need to do this to actually trigger a transition. - this.queueClass(activeClassName); + this.queueClassAndNode(activeClassName, node); // If the user specified a timeout delay. if (userSpecifiedDelay) { @@ -102,26 +102,29 @@ var ReactCSSTransitionGroupChild = React.createClass({ } }, - queueClass: function(className) { - this.classNameQueue.push(className); + queueClassAndNode: function(className, node) { + this.classNameAndNodeQueue.push({ + className: className, + node: node, + }); if (!this.timeout) { - this.timeout = setTimeout(this.flushClassNameQueue, TICK); + this.timeout = setTimeout(this.flushClassNameAndNodeQueue, TICK); } }, - flushClassNameQueue: function() { + flushClassNameAndNodeQueue: function() { if (this.isMounted()) { - this.classNameQueue.forEach( - CSSCore.addClass.bind(CSSCore, ReactDOM.findDOMNode(this)) - ); + this.classNameAndNodeQueue.forEach(function(obj) { + CSSCore.addClass(obj.node, obj.className); + }); } - this.classNameQueue.length = 0; + this.classNameAndNodeQueue.length = 0; this.timeout = null; }, componentWillMount: function() { - this.classNameQueue = []; + this.classNameAndNodeQueue = []; this.transitionTimeouts = []; }, @@ -132,6 +135,8 @@ var ReactCSSTransitionGroupChild = React.createClass({ this.transitionTimeouts.forEach(function(timeout) { clearTimeout(timeout); }); + + this.classNameAndNodeQueue.length = 0; }, componentWillAppear: function(done) { diff --git a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js index 5d24d9b05dc5..8fed09b6cb4d 100644 --- a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js +++ b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js @@ -291,4 +291,42 @@ describe('ReactCSSTransitionGroup', function() { // Testing that no exception is thrown here, as the timeout has been cleared. jest.runAllTimers(); }); + + it('should handle unmounted elements properly', function() { + var Child = React.createClass({ + render() { + if (!this.props.show) { + return null; + } + return
; + }, + }); + + var Component = React.createClass({ + getInitialState() { + return { showChild: true }; + }, + + componentDidMount() { + this.setState({ showChild: false }); + }, + + render() { + return ( +