If a TextField with multiline is wrapped in a react-addons-css-transition-group it breaks the show transition. Is there any way to handle this properly?
Here's my code: https://codesandbox.io/s/material-demo-v4byd
If you remove the multiline tag the transition work.
EDIT: I've adjusted my code to the answer from Fraction but it still doesn't work: https://codesandbox.io/s/material-demo-vpde6
EDIT2: working example for the second demo: https://codesandbox.io/s/material-demo-1kdyl
Take a look at the following example, I've used react-transition-group because the doc from react-addons-css-transition-group says:
The code in this package has moved. We recommend you to use
CSSTransitionGroupfromreact-transition-groupinstead.
You could use CSSTransition instead of ReactCSSTransitionGroup for one item or combined with TransitionGroup for a list of CSSTransition Components :
import { CSSTransition } from "react-transition-group";
...
<CSSTransition
in={this.state.show}
timeout={400}
classNames="Test"
unmountOnExit
>
{this.renderTextField()}
</CSSTransition>
You must remove if (!this.state.show) { return null; } from renderTextField since CSSTransition requires a child.
test.css (the opacity property is not mandatory)
.TestWrapper {
position: relative;
left: 0px;
}
.Test-enter {
left: 100px;
opacity: 0;
}
.Test-enter-active {
opacity: 1;
left: 0px;
transition: left 400ms, opacity 400ms;
}
.Test-exit {
opacity: 1;
left: 0px;
}
.Test-exit-active {
opacity: 0;
left: 100px;
transition: left 400ms, opacity 400ms;
}
Working example:
