Destroys ref prop passed to children

[natew]

        <FlipMove>
            {[1, 2, 3, 4].map(x => <Test key={x} ref={console.log} />)}
          </FlipMove>

Ref wont callback here at all. But if you move it outside of map it works just fine!

[joshwcomeau]

Hm, you shouldn't be able to assign refs on children passed to FlipMove anyway - FlipMove clones the set of children you provide and overwrites the ref. That's how it works its magic; it needs access to the underlying DOM node.

What is it that you're trying to do exactly?

[natew]

I need to call methods on the children to do various things with them. An example is focusing their text input on the item you click.

…

On Thu, Apr 20, 2017 at 6:45 AM Joshua Comeau ***@***.***> wrote: Hm, you shouldn't be able to assign refs on children passed to FlipMove anyway - FlipMove clones the set of children you provide and overwrites the ref. What is it that you're trying to do exactly? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#140 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAvRLlDOcUvyuhxadXnyphO-sfAPiJIks5rx2GUgaJpZM4NCURP> .

[joshwcomeau]

Yeah, so as long as the ref isn't on the direct child, everything should be fine.

class YourForm extends Component {
  render() {
    return (
      <FlipMove>
        {[1,2,3,4].map(id => (
          <div>
            <input ref={...} />
          </div>
        )}
      </FlipMove>
    )
  }
}

You can (and maybe should) also extract the input into its own component.

class YourInput extends Component {
  render() {
    return <input ref={...} />;
  }
}

class YourForm extends Component {
  render() {
    return (
      <FlipMove>
        {[1,2,3,4].map(id => <YourInput key={id} />}
      </FlipMove>
    )
  }
}

[natew]

Yea the input is in a component. I am calling focus on the parent component. But good point I guess I can nest it, confusing to figure out though would be good to document.

…

On Fri, Apr 21, 2017 at 6:44 AM Joshua Comeau ***@***.***> wrote: Yeah, so as long as the ref isn't on the direct child, everything should be fine. class YourForm extends Component { render() { return ( <FlipMove> {[1,2,3,4].map(id => ( <div> <input ref={...} /> </div> )} </FlipMove> ) } } You can (and maybe should) also extract the input into its own component. class YourInput extends Component { render() { return <input ref={...} />; } } class YourForm extends Component { render() { return ( <FlipMove> {[1,2,3,4].map(id => <YourInput key={id} />} </FlipMove> ) } } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#140 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAvROBc7iz_W9zOwu6UwQARi89unToKks5ryLK2gaJpZM4NCURP> .

[joshwcomeau]

Yeah, I can see how that'd be confusing. We could add it to the "Gotchas", although I don't know how much good that does; it isn't a place people typically check when experiencing an issue.

Maybe we can add a console warning if FlipMove detects a pre-existing ref on a supplied element.

Would be a great contribution if you or anyone else reading this wants to take it on :)

[natew]

Yep that or it could take a function as children possibly which I think avoids that problem as well.

…

On Sun, Apr 23, 2017 at 6:59 AM Joshua Comeau ***@***.***> wrote: Yeah, I can see how that'd be confusing. We could add it to the "Gotchas", although I don't know how much good that does; it isn't a place people typically check when experiencing an issue. Maybe we can add a console warning if FlipMove detects a pre-existing ref on a supplied component. Would be a great contribution if you or anyone else reading this wants to take it on :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#140 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAvRIAWEtuf2m8vPRcHZoxotPVipitgks5ry1kugaJpZM4NCURP> .

[jahooma]

There's actually a simple way to pass the ref along so the original child can get it too.

After line 739 (https://github.com/joshwcomeau/react-flip-move/blob/master/src/FlipMove.js#L739), add the if statement:

if (typeof child.ref === 'function') {
  child.ref(node);
}

I believe this would work, but have not tested it. See also: facebook/react#8873

This solves a headache for a few users. In my case, I was trying to get the DOM refs for further calculations, like which children are currently visible in the scroll area.

Love your library by the way <3. We are using it profusely in our new social app, throne.live.

[joshwcomeau]

@jahooma interesting! That does seem like it'd work.

My time is stretched far too thin right now, but if you (or anyone else reading this) wanted to open a PR with that change, I'd happily merge it (just be sure to test that it works in the local storybook).

Also thanks for sharing throne.live, I always love seeing where Flip Move gets used :)