search

floating-ui / react-popper

🍿⚛Official React library to use Popper, the positioning library
https://popper.js.org/react-popper/
MIT License
2.5k stars 226 forks source link

Wrong arrow positionning #416

Closed Dataxelio closed 3 years ago

Dataxelio commented 3 years ago

Reproduction demo

https://codesandbox.io/s/festive-lichterman-go5wj?file=/src/App.tsx

Steps to reproduce the problem

Please see codesandbox.

What is the expected behavior?

Arrow should be positionned correctly with the translate css property available on styles.arrow

What went wrong?

screenshot_20210420

Any other comments?

Maybe I miss something but I expect at least to have the correct positionning out of the box with styles.arrow. In my code, I also try to add a rotate(45deg) to the transform available on styles.arrow. But this is an another point.

Packages versions

FezVrasta commented 3 years ago

Hi, that's not how it works, popper only computes the arrow offset.

Take a look at the tutorial on popper.js.org to see a full example