Clear transition timeouts when component unmounts. Fixes #4876
jj committed
Nov 4, 2015 at 14:30 UTC
73b496db95fed805ac64c7a395d8e098272436ff
2 files changed
+27
src/addons/transitions/ReactCSSTransitionGroupChild.js
+5
@@ -100,6 +100,7 @@ var ReactCSSTransitionGroupChild = React.createClass({
100
if (userSpecifiedDelay) {
101
// Clean-up the animation after the specified delay
102
timeout = setTimeout(endListener, userSpecifiedDelay);
103
+ this.transitionTimeouts.push(timeout);
104
} else {
105
// DEPRECATED: this listener will be removed in a future version of react
106
ReactTransitionEvents.addEndEventListener(node, endListener);
@@ -126,12 +127,16 @@ var ReactCSSTransitionGroupChild = React.createClass({
127
128
componentWillMount: function() {
129
this.classNameQueue = [];
130
+ this.transitionTimeouts = [];
131
},
132
133
componentWillUnmount: function() {
134
if (this.timeout) {
135
clearTimeout(this.timeout);
136
}
137
+ this.transitionTimeouts.forEach(function(timeout) {
138
+ clearTimeout(timeout);
139
+ });
140
},
141
142
componentWillAppear: function(done) {
src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+22
@@ -269,4 +269,26 @@ describe('ReactCSSTransitionGroup', function() {
269
var leavingNode = ReactDOM.findDOMNode(a).childNodes[0];
270
expect(CSSCore.hasClass(leavingNode, 'custom-leaving')).toBe(true);
271
});
272
+
273
+ it('should clear transition timeouts when unmounted', function() {
274
+ var Component = React.createClass({
275
+ render: function() {
276
+ return (
277
+ <ReactCSSTransitionGroup
278
+ transitionName="yolo"
279
+ transitionEnterTimeout={500}>
280
+ {this.props.children}
281
+ </ReactCSSTransitionGroup>
282
+ );
283
+ },
284
+ });
285
+
286
+ ReactDOM.render(<Component/>, container);
287
+ ReactDOM.render(<Component><span key="yolo" id="yolo"/></Component>, container);
288
+
289
+ ReactDOM.unmountComponentAtNode(container);
290
+
291
+ // Testing that no exception is thrown here, as the timeout has been cleared.
292
+ jest.runAllTimers();
293
+ });
294
});