React-transition-group: unmountOnExit skips `exited` phase

Created on 17 Oct 2017  路  8Comments  路  Source: reactjs/react-transition-group

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When setting a transition to unmountOnExit it seems to skip the exited status and go to unmounted. This causes transitions never to happen and elements to snap off the screen

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/m4mb9Lg3/4/).

https://codepen.io/cjthedizzy/pen/GMPgoV?editors=0010

What is the expected behavior?

unmount would occur _after_ the exited phase has run for the timeout period provided

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Version 2.0.2, all, not applicable.

Most helpful comment

At the very least I think it should be noted in the docs that EXITED will not ever occur when onmountOnExit is true and to avoid using that phase for transition state. EXITED seems to exist for the ability to set "after" states not transition states.

All 8 comments

The transition out should happen during exiting, not exited. If you want to delay the transition from playing, use a timeout.

So EXITED should not contain any transition state then because if unmountOnExit is passed your transition will never fire.

Also timeout wouldn't delay a transition from ENTERED to EXITING it only keeps the EXITING status for a longer period. To delay you'd have to set a transitionDelay and make sure your timeout is long enough to accommodate transitionDuration and transitionDelay

Yes understood, I think the gotcha here is I wasn't aware that EXITED should not contain transition state because the unmountOnExit option skips EXITED entirely and unmounts instead.

Maybe we should keep it consistent and always move from exiting to exited? Then to unmounted? It is a bit of a gotcha that you need to handle both end states

They should be identical, though. And in any case the example above wouldn't work, because there would be no point in waiting on the timeout to move to "unmounted".

At the very least I think it should be noted in the docs that EXITED will not ever occur when onmountOnExit is true and to avoid using that phase for transition state. EXITED seems to exist for the ability to set "after" states not transition states.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lukasreusch picture lukasreusch  路  4Comments

DeyLak picture DeyLak  路  4Comments

Alfrex92 picture Alfrex92  路  4Comments

mosesoak picture mosesoak  路  5Comments

JohnAlbin picture JohnAlbin  路  5Comments