Arrow position does not follow after flipping the tooltip when using a VirtualElement as reference

[CJourneaux]

Reproduction demo

Code sandbox link

There are instructions on how to use the demo, and how to reproduce the bug step-by-step in the demo.

Steps to reproduce the problem

1. Create a virtual element that will be the reference point for positioning the tooltip
2. Create a tooltip with :
   • a placement "top"
   • an offset big enough to position an arrow inside
   • a reference to an arrow element
3. Place the virtual element so that the tooltip would collide with the borders if placed above the reference
   • the tooltip will flip to place under the virtual element
   • the arrow should place itself above the tooltip but remains under

Alternative that causes the same bug

1. Follow the same procedure as above, but use a placement "left" this time
2. The arrow never positions itself properly between the tooltip and the virtual element, whether the tooltip has flipped or not

What is the expected behaviour?

• The arrow element should always place itself between the virtual element and the tooltip, even when the tooltip is flipped to avoid collisions with the window border.

What went wrong?

• When flipping the tooltip across the vertical axis, the arrow remains positioned under the tooltip instead of translating above of it.
• When using an horizontal axis, the arrow element remains inside the tooltip instead of outside, and the same issue with the flipping not moving the arrow to be placed between the tooltip and the origin happens as well.

Any other comments?

Not sure whether this bug is caused by :

• using a virtual element
• the react-popper library
• the popper library

Packages versions

• Popper.js: 2.11.6
• react-popper: 2.3.0