React: ReactTransitionGroup hidden element not reappearing

Question

I have an issue with ReactTransitionGroup, whereby an element which has just had .superfade-leave-active applied, doesn't apply .superfade-enter afterwards, when the render method is telling it to.

http://jsfiddle.net/joecritch/6bpJD/3/

The logic is that the message shown is the first item in the ReactTransitionGroup list, and my UserSearchResults component is the second. The latter only appears when the data is loaded. (The data is mocked as an array at the top, and is loaded with a 500ms delay.)

Desired result: first element appears whenever there is text in the list; second always appears whenever the data is loaded

Actual result: first element works as desired; second shows initially, but then after any text change after 500ms, it animates away.

Note: When the animate component is removed, it works as expected.

Answer 1

Looks like you ran into a bug in React that was fixed a few weeks ago but didn't make it into the latest release:

https://github.com/facebook/react/commit/c313a1045db0a81a704df14f5da60f3690441fbf

If I change your jsfiddle to use a nightly build of react (http://react.zpao.com/builds/master/latest/react-with-addons.js) then it appears to me to work correctly.