Doesn't work with CSSTransitionGroup animations

[eriklovdahl]

I'm using a CSSTransitionGroup to perform a page transition to a page with the textarea-autosize component. The animation won't run if I don't remove the call to _resizeComponent in ComponentDidMount.

Not entirely sure what's causing it yet.

[andreypopp]

Do you have a repro? Would useful to debug.

[muntamala]

Run into the same issue. I have a parent container with CSSTransitionGroup using transform: translate3d to animate a page slide in from right.

[andreypopp]

@muntamala would be good to have a gh repo I can debug against.

[deep-c]

Having the same issue @muntamala , tested on a local project. The animation becomes 'jittery' when transitioning a component (that contains this Textarea component within) using CSSTransitionGroup. Removing the _resizeComponent() call in componentDidMount solved the issue as @eriklovdahl mentioned.

[andreypopp]

Wrapping textarea component with https://github.com/reactjs/react-static-container and setting shouldUpdate={false} during animation could help probably.

[deep-c]

@andreypopp unfortunately wrapping it with the static container doesnt seem to have any effect. While I dont quite understand the intricacies of the problem we know its from the call to _resizeComponent on mount. Could a possible solution be the just pass a prop to which we could disable this initial call to that function (defaults true)?

[andreypopp]

@deep-c can you provide a repo or jsfiddle with repro?

[asquet]

I had similar issue: Textarea occupied all height when its parent was changing size with css transitions. Setting useCacheForDOMMeasurements seems to fix it

[Andarist]

@asquet could u share a reproduced issue on something like https://codesandbox.io/ ? I would love to take a quick look on how it is behaving during the transitions.

[asquet]

I tried to, but could not import react-textarea-autosize properly. Could you make base fiddle that I can extend?

[Andarist]

https://codesandbox.io/s/M8pJnJ185

[asquet]

Heres what Ive managed to put together
https://codesandbox.io/s/pYyzv0Jjr
It's a rather messy, sorry about that. I hope it can help you to get the idea.
Click "toggle" to change sizes. After second change textarea will get higher than it should

[Andarist]

Thanks! I'll definitely look into this when I have some spare time and provide at least explanation why this happens, although hopefully it will be fixable ;)