Arrow position wrong for certain placements

[peterjcaulfield]

Reproduction demo

https://codesandbox.io/s/blue-leftpad-4of16?file=/src/Tooltip.tsx

I am using example code from the popper docs with styled components.

I want to make sure it is not related to styled components usage. Happy to create an additional example if this repro isn't good enough.

Steps to reproduce the problem

Please see code sandbox. Issue is present on load.

What is the expected behavior?

When I adjust the placement value the arrow should be positioned correctly via styles.arrow

What went wrong?

The arrow is positioned correctly for certain placements like top and bottom but is off for most other placements including variation placements like top-start, bottom-start etc.

Any other comments?

I might be missing some userland code that I need to add here but my expectation was that the arrow would get positioned automagically via the translate styling being passed via styles.arrow.

Guidance on how to get the correct arrow position for all placement values would be greatly appreciated!

Packages versions

• Popper.js: 2.6.0
• react-popper: 2.2.4

[FezVrasta]

I can't see anything in the codesandbox, code is missing.

From the screenshot it looks like you may want to add some margin to the arrow element so that it doesn't glitch like in your pictures.

[peterjcaulfield]

@FezVrasta sorry about that VPN glitched when saving. It should be working now 👍

Thanks for the quick response.

I updated my usePopper invocation to set a padding on the arrow and things look good now.

const { styles, attributes } = usePopper(
    referenceElement.current,
    popperElement.current,
    {
      placement,
      modifiers: [
-       { name: "arrow", options: { element: arrowElement } },
+       { name: "arrow", options: { element: arrowElement, padding: 10 } },
        { name: "offset", options: { offset: [0, 8] } }
      ]
    }
  );

I have a couple of questions:

• is it possible to configure this padding dynamically based on a placement via this API?
• do you think it's worth updating the docs to include this padding in the example code so that all placements show up correctly?

[jayarjo]

Adding arrow to react-popper is way more complicated than it should be.

@peterjcaulfield where in the docs is example that you mention linked? I only found it through the repo.