Transition classes are not removed after transition is done

[mauron85]

Environment

• Android 6
• Chrome for Android v56
• preact-css-transition-group version: 1.1.1

Context

This is similar seems to identical or similar to facebook/react#1707.

However I've identified two issues:

The outcome is either (unpredictable):

1. After sequence of fast changes (add/delete operations) nodes under ReactCSSTransitionGroup are left stuck with transition classes *-leave *-enter-active.

2. After sequence of fast changes (add/delete operations) nodes under ReactCSSTransitionGroup both nodes (node that is "entering" and also node that is "leaving") are kept in DOM.

Steps to Reproduce

1. visit https://goo.gl/rEsjm7 in Chrome for Android
2. tap quickly on 'Goto page x' to invoke transitions
3. after some time, you end up with blank screen (outcome 1) or unable to transition to another page (outcome 2), because of issues mentioned above

Possible fix

Merge latest react-css-animation-group changes.

[mauron85]

Seems really fixed in react, as it cannot be reproduced on react

https://mauron85.github.io/preact-css-transition-group-issue/react.html

[developit]

I recall they add a manual timeout, which we'd want to do here as well. transitionEnd is unreliable - it doesn't fire for interruptions, for example.

[mauron85]

I just want to share progress on this. I would like to rebase preact-css-transition-group on top of [email protected].

I've decided that Instead of storing modified react source files, I'm going to add additional build step, that will:

1. download unmodified react sources
2. apply patch on them
3. run build

So repo will only hold patches.

Initial work is in my repo https://github.com/mauron85/preact-css-transition-group/tree/fix/issue-8

Basically there is new command: npm run patch that will download and patch react source.
Also I've added fbjs library as dependency as react transition classes are using it.

But there are some problems that need to be resolved:

1. some fbjs dependencies (fbjs/lib/CSSCore) are requiring module invariant from relative path and I cannot figure out how to alias this for my own variant in rollup config. The problem with fbjs invariant is that uses process.env.NODE_ENV !== 'production' check which will result in process undefined exception.
solved with rollup alias (but not very elegant)

2. Uncaught TypeError: component.__ref is not a function.
I guess problem is in ReactCSSTransitionGroup.js which is using React.createElement and simple replacement for preact.h seems to be not enough.

3. dom children are accidentally removed, leaving empty span

[developit]

The original React sources are using String refs, which are not supported in Preact core (only in preact-compat).

[mauron85]

I was able to fix 2. by comparing with your code. Now it finally render something at least, but still need some treatment. Also I can confirm, that react fixed it by adding timeout, like you said.

[developit]

Hey, that's quite an improvement over just rendering nothing, haha. Do you think adding a timeout fallback would fix the issue seen on your link, or is it something else?

[mauron85]

Small update. React team recently release react-transition-group as standalone project with almost no external dependencies. I've succeeded in making it work with preact-compat. I've created fork preact-transition-group. Basically it only sets aliases for react and react-dom in webpack conf and nothing else.
It seems to work without any modifications with preact-compat.

However it seems that it has same issue as mentioned here.
EDIT: Github was serving invalid cached copy of some files. Seems ok now.

Demo: https://mauron85.github.io/preact-css-transition-group-issue/fixed.html

Also I would like to make it work also with pure preact (without the need of preact-compat)

It should be viable, if we can find replacement for this findDOMNode.

And also https://github.com/reactjs/prop-types instead preact-compat Proptypes. (I've actually tried this, but it somehow does not work in production build)

[developit]

That's awesome, I was really hoping the standalone version would "just work" with compat! Perhaps we can just redirect users there so we don't have to maintain a fork at all :)

We're working on releasing prop-types as the default checker for preact-compat, which should fix the second issue.

For findDOMNode, here's an implementation:

function findDOMNode(component) {
  return component.base;
}

Maybe we can get an issue filed on the preact repo for a "light" version of preact-compat? It's been suggested a few times and I know I'd certainly be interested. Now that preact 8 exports createElement() there are fewer APIs to emulate - really just Children, render() and findDOMNode().

[developit]

This is fixed in 1.3.0.