Context API Consumer component prevents unmounting #338
Description
Bug / Question
What is the expected behavior?
<TransitionGroup>
<CSSTransition>
{children}
</CSSTransition>
</TransitionGroup>
which works fine, the children transition in and out as expected and get unmounted as expected.
What is the new behavior?
Now we've implemented the context API, which wraps the children in a consumer component like so;
const connect = (Component) => {
class ConsumerComponent extends React.Component {
render() {
const { forwardedRef, ...rest } = this.props;
return (
<StoreContext.Consumer>
{ context => (<Component ref={forwardedRef} {...Object.assign({ context }, { ...rest })} />)}
</StoreContext.Consumer>
);
}
}
return React.forwardRef((props, ref) => {
return <ConsumerComponent {...props} forwardedRef={ref} />;
});
};
I imagined we were doing something wrong our end, but the enter/exit classes get applied to the correct DOM elements, but unmount never happens and componentWillUnmount is never called which means per transition, components just stack up. So TransitionGroup knows what is meant to be unmounted but never completes the unmount.
Is it something, we're doing wrong, the group knows what to unmount, it never goes ahead and unmounts them. Any pointers would be welcome.