-
Notifications
You must be signed in to change notification settings - Fork 47.7k
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
Comments
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 If you check the console, it has this warning:
|
@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. |
Thanks @chenglou. It seems there might be a lot of changes around refs too which would help as well. |
I wonder, wether there is a workaround for now? How can I access the elements in the TransitionGroup, if ref doesn't work? |
+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. |
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. |
Hello
We've encountered unexpected behaviour when wrapping list items that have refs (eg
<input ref={key} key={key} />
) in aTransitionGroup
. The refs are no longer found in the component'sthis.refs
unless you wrap each item in an extra element (eg<div key={key}><input ref={key} /></div>
). The problem only seems to occur withTransitionGroup
.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
The text was updated successfully, but these errors were encountered: