Popper-core: `escapeWithReference` option and `keepTogether` modifier are confusing

[imkremen]

Option "escapeWithReference" work only with one axis.
It's related to axis of "placement", i.e. if you have "placement: right", popper will escape on vertical scroll.

Here example https://codepen.io/imkremen/pen/xdEdzv

[FezVrasta]

I'm not sure if it's a bug or simply the feature didn't mean to include this use case 🤔

/cc @nadiam84, you wrote that code if I remember correctly?

[FezVrasta]

Sorry for the confusion, it's the keepTogether modifier that leads to this behavior.

https://codepen.io/FezVrasta/pen/vmXZYx

I think this part of the API is a bit confusing...

Also, I think the escapeWithReference option doesn't behave properly. Or at least, it behaves the same as if I completely disable the preventOverflow modifier 😓

Probably it would make sense to deprecate the escapeWithReference option or the keepTogether modifier and integrate the deprecated feature inside the other one.

[adevnadia]

The idea behind 'escape with reference' was that popper behaves like it doesn't have preventOverflow modifier, but flipping still works.

In the first example in this issue the escapeWithReference is false and we can see the default popper behavior.

The correct example would be like this: https://codepen.io/nadiam84/pen/PmWpmy
When you scroll up, popper escapes, but flipping still works.

But if you scroll to the left, you'll see that popper just escapes, without flipping. To enable flipping for this axis you need to set flipVariations in the flip modifier to true. https://codepen.io/nadiam84/pen/mmRWwK

@FezVrasta, I completely agree that this is confusing though, probably should be refactored somehow?

[FezVrasta]

I think we could get rid of the need of escapeWithReference if we changed flip to not rely on preventOverflow..

[diondiondion]

Am I correct in thinking that it's not currently possible to get the behaviour of escapeWithReference: true while still keeping preventOverflow enabled?

I'd like to get the scrolling behaviour shown in this pen: https://codepen.io/anon/pen/WBGpqV...

(Popper escapes along with reference), but with the positioning you get when disabling escapeWithReference, i.e. without the cut-off popper:

Is there a workaround for this?

[FezVrasta]

I think the codepen is not correct, I don't see the same situation as your GIFs show.

[diondiondion]

Indeed, sorry, copied the wrong URL, here's the correct one: https://codepen.io/anon/pen/WBGpqV

[FezVrasta]

Yes I fear there's no way to define on which axis enable the preventOverflow, I think we already have an issue opened to track this feature request but I can't find it at the moment

[diondiondion]

I see. For now I'll make do without the "escapeWithReference" behaviour.

I fear there's no way to define on which axis enable the preventOverflow, I think we already have an issue opened to track this feature request

Just in case it helps define the scope of this: I suppose my request wouldn't be so much to be able to manually/statically define on which axis to prevent overflow. I'd _only_ want to disable overflow in the case when the reference element has been scrolled out of view, and it should only be disabled in that single direction.