Popper-core: Is there a way to apply `flip` before `preventOverflow`?

[Justineo]

CodePen demo

https://codepen.io/Justineo/pen/QaypBM

Steps to reproduce the problem

1. with placement set to bottom-start
2. when the reference is on the right side of the container
3. the popper is shifted (#pop)

What is the expected behavior?

Provide a way to apply flip when the popper is placed outside the container rather than shift it. (Like #pop2 in the CodePen demo.)

What went wrong?

Sometimes we want to flip the popper when it's outside the container, not when it overlaps with the reference element.

Any other comments?

I've looked into how popper handles this now, but not sure how to handle this.

[arechsteiner]

I'm facing this same problem when trying to implement a navigation menu.

I've tried setting the flip behavior but it doesn't work as expected when the popper element overflows on the right side:

{
  placement: 'bottom-start',
  modifiers: {
    flip: {
      behavior: ['bottom-start', 'bottom-end']
    }
  }
}

In this shot the "Dropdown" in the top bar is the reference, and the expanded drop down menu is the popper element.

[leevigraham]

Similar issue (another example):

{
    placement: 'bottom-start',
    modifiers: {
        flip: {
            behavior: ['bottom-start', 'bottom-end']
         }
     }
 }

[leevigraham]

@arechsteiner setting the boundariesElement to viewport will make sure the whole popper is shown

{
  placement: 'bottom-start',
  modifiers: {
    preventOverflow: {
      boundariesElement: 'viewport'
    }
  }
}

[Justineo]

setting the boundariesElement to viewport will make sure the whole popper is shown

It's not the desired behavior. This will shift the popper element to the left but we want its right border to align with the right border of the reference element (flip instead of shift).

[leevigraham]

@Justineo Yep I understand it's not the desirable behaviour but @arechsteiner it will atleast show all the content.

[Lehakos]

@FezVrasta any news about this feature?