How to do escapeWithReference in react-popper 2.3.0

[eduardoacskimlinks]

I am trying to migrate the component to use 2.3.0. However, the documentation is excellent so far. There is no reference on how to keep doing escapeWithReference.

There is information on how it is supposed to behave on https://popper.js.org/docs/v1/#modifierspreventoverflow, but I need clarification on how to persist the original behaviour. Could you give me some guidance on how to do this?

[bradyshutt]

It's not well documented and is quite confusing because there have been multiple ways to achieve this in past versions, but I think I figured out what is happening in the React Popper (Popper v2.x).

The default flip modifier is causing the popper to try to "flip" positions when it falls out of bounds, trying to keep it in the viewport.

Explicitly adding/overriding the flip modifier with no fallback options is the solution for me that enables the popper to stay attached to its reference element in the position it started in, effectively allowing it to "escape with its reference".

modifiers: [
    { name: 'flip', options: { fallbackPlacements: [] } },
]

[eduardoacskimlinks]

Thanks, @bradyshutt. I will give it a try and share its outcome 🤞