Popper-core: Popper overflows with very small reference at edge of screen + arrow element

[atomiks]

CodePen demo

https://codepen.io/anon/pen/aQZdaY

Mainly concerned about using a virtual reference to follow the cursor, rather than this being a real element on a website

Steps to reproduce the problem

1. Move mouse to the left or right edge of the viewport
2. Popper overflows

It overflows if it has an arrow element. If it doesn't have an arrow, it will ignore the 5px padding and move closer to the edge with the cursor but won't overflow

What is the expected behavior?

No overflow, keeps 5px padding. Not sure if this is expected & if there's a config option for it..

[atomiks]

@FezVrasta any idea what the problem here is?

[FezVrasta]

You should set a margin-top: 20px to your poppers to take in account the arrow size. Once you fix that everything should look good.

[atomiks]

I'm mainly talking about the left/right overflow in the example. Adding margins there seems to cause excessive padding

[atomiks]

As far as I'm aware it seems to be a side effect of the keepTogether modifier. It will keep the arrow together with the reference no matter what, but I think it should not cause the popper to overflow in order to keep the arrow with the reference.

[FezVrasta]

This seems to be even more broken in v2

[FezVrasta]

@atomiks does everything look good here? https://codepen.io/FezVrasta/pen/gObLZWw

[atomiks]

Looks like it's fixed yeah

[atomiks]

Nevermind it's not fixed 😆

I looked at it more closely – the CodePen is using [x-arrow] but we use [data-popper-arrow] now. Changing to that causes it to overflow again.

I am guessing it's due to the tether option including the arrow in the calculation (which is larger than the reference), but we need to make an exception if the reference is smaller than it.