Popper-core: While inner modifier is enabled, offset modifier only works along main axis

[DawnWright]

CodePen demo

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

Steps to reproduce the problem

1. Enable modifier inner with modifier offset that specifies an offset in both directions, as shown on element TR1 in the codepen.
2. Compare against an element placed without inner and which uses %p to accomplish the inner placement (element TR2 in the codepen).

What is the expected behavior?

offset modifier should work in both directions when inner modifier is enabled. TR1 and TR2 should be in the same location.

What went wrong?

While inner modifier is enabled, offset modifier only works along main axis.

Any other comments?

[FezVrasta]

Right, looks like the secondary axis can't be shifted while inner is enabled 🤔

[SavePointSam]

Just ran into this myself.

[sgilligan]

+1

[FezVrasta]

The v2 offset modifier will allow you to define your own logic to accomplish the inner + offset.

new Popper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ({ placement, reference, popper }) => {
          if (placement === 'bottom' || placement === 'top') {
            return [-popper.height];
          } else {
            return [-popper.width];
          }
        },
      },
    },
  ],
});

I'm marking this issue as "Fixed in v2" then.