Material-UI: TextField: react-addons-css-transition-group breaks with multiline TextFields

Question

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

Answer 1

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 CSSTransitionGroup from react-transition-group instead.

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: