Usage with VelocityTransitionGroup gets the wrong position

[jkarsrud]

Hi there,

As mentioned on Twitter, I'm having some issues using VelocityTransitionGroup with react-popper. When first animating the popper in, the positioning is wrong. To fix it, you need to cause a re-render, either through resizing the window, or similar things that will schedule an update.

I have made a small reproduction repo that illustrates the issue. The body of the render function is as follows;

const enter = {
  animation: 'fadeIn'
};
const leave = {
  animation: 'fadeOut'
};

return (
  <Manager>
    <Target onClick={this.handleTogglePopover}>
      {this.props.target}
    </Target>
    <VelocityTransitionGroup enter={enter} leave={leave}>
      {isOpen ? (
        <Popper placement={this.props.placement}>
          {this.props.children}
          <Arrow className="popper__arrow" />
        </Popper>
      ) : null}
   </VelocityTransitionGroup>
  </Manager>
);

I've also tried following the tips in #13, by making the child of <Popper /> into a function, and applying the props, but that didn't make any difference in the position.

I'm starting to think that I might need to pass a modifier to make sure it updates on render, but I was under the impression that that should happen automatically through react-popper.

[jkarsrud]

Hi @souporserious! Sorry to ping you like this, but did you get a chance to look into this one?

[jkarsrud]

Instead of the repo, I changed this to a codesandbox for easier reproduction https://codesandbox.io/s/qvj9qov62w. I was thinking this might be the same kind of issue as #47, or there's something up with wrapping it in a <VelocityTransitionGroup /> (from https://github.com/twitter-fabric/velocity-react) that will make the positioning read out the offsets incorrectly? I'm not 100% sure how best to debug or how to force-schedule an update. Looking at the code, it looks like I won't be able to create my own applyStyle modifier either, as it's being disabled after spreading this.props.modifiers:

https://github.com/souporserious/react-popper/blob/ef520ee1213f30d3af3f10c6f5b4a04a888deb73/src/Popper.jsx#L96-L100

I tried adding my own computeStyle modifier, but that only broke things further, so I guess it was a naive and incomplete implementation of it. Hopefully the sandbox will make it easier to reproduce and help me figure out what's wrong here :)

[souporserious]

Sorry for the long wait on this. We expose a helper now to schedule an update when necessary. You should call this whenever a popper needs be replaced and might not have picked up the update.