Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TransitionGroup wrapper interferes with a component's refs #1950

Closed
bjbrewster opened this issue Jul 29, 2014 · 6 comments
Closed

TransitionGroup wrapper interferes with a component's refs #1950

bjbrewster opened this issue Jul 29, 2014 · 6 comments

Comments

@bjbrewster
Copy link

Hello

We've encountered unexpected behaviour when wrapping list items that have refs (eg <input ref={key} key={key} />) in a TransitionGroup. The refs are no longer found in the component's this.refs unless you wrap each item in an extra element (eg <div key={key}><input ref={key} /></div>). The problem only seems to occur with TransitionGroup. CSSTransitionGroup works fine and I created my own test wrapper component which also worked.

Please see attached fiddle for contrived example that should focus the new list item when you click the button: http://jsfiddle.net/Zimble/gsj3E/10/

Many thanks,
Brendan

@chenglou
Copy link
Contributor

TransitionGroup clones your children, so the ref you hold are not actually used by it. Cloning is only one-level deep, so if you wrap it with some random wrapper, the inner input is indeed kept intact while the outer div is cloned.

If you check the console, it has this warning:

Warning: You are calling cloneWithProps() on a child with a ref. This is dangerous because you're creating a new child which will not be added as a ref to its parent. 

@chenglou
Copy link
Contributor

@bjbrewster I'll close this because this is the intended behaviour. Maybe we should document that.

I'm working on a new, low-level TransitionGroup prototype. It actually uses the original children so refs work there (it's achievable). No guarantee though, because the prototype's API might change.

@bjbrewster
Copy link
Author

Thanks @chenglou. It seems there might be a lot of changes around refs too which would help as well.

@ghost23
Copy link

ghost23 commented Dec 4, 2014

I wonder, wether there is a workaround for now? How can I access the elements in the TransitionGroup, if ref doesn't work?

@nickcoad
Copy link

+1 I would also love a workaround for this - it seems like wanting to use refs on TransitionGroup children would be a very common requirement.

@ccorcos
Copy link

ccorcos commented May 28, 2015

Oy. I'm having this issue as well. Very annoying. If you pass a function as a ref, it never gets called either. So transition group is just totally dropping the refs which is a bummer.

This is actually a huge problem for me. I'm using that ref to execute an animation. I think this issue should be reopened.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants