When single item is replaced, elements are inserted in wrong order

[williamrjribeiro]

What is the current behavior?
When TransitionGroup is used for managing Transitions, there's an edge case which results in a bug. Let me try to explain:

1. Imagine a todo list with a max of 3 items. One item per row.
2. Items are added at the bottom so the topmost item is the oldest.
3. The list has already 3 items and a new one is added, the oldest item, at the top, is removed to make room for the new one added at the bottom.

This scenario already works as expected.

The edge case is when the list has a max of 1. Notice how the Replaced item appears at the top of the list instead of the bottom.

What is the expected behavior?
The new item should have appeared at the bottom of the list. In other words, when TransitionGroup has only one child and in the next render this child is replaced by a new one, the order in which the children are processed should be reversed.

I think the problem might be on mergeChildMappings.

You can try a simplified version of the example here.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
I reproduced this bug with ^2.3.1.

If anyone knows a workaround for this problem, please share. 😉