alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.
https://alpinejs.dev
MIT License
28.46k stars 1.24k forks source link

Add `x-anchor.noflip` modifier #4382

Open aguingand opened 1 month ago

aguingand commented 1 month ago

This PR adds ability to disable auto flipping for anchor. In some cases you want to force the anchored element to stay at his position and not flipping to the top if there is no enough room below. For example with large menus or popovers teleported to body.

Usage :

<div x-anchor.noflip>
</div>

<!-- with position -->
<div x-anchor.bottom-start.noflip>
</div>
ekwoka commented 1 month ago

Is there a way to add a test for this?

aguingand commented 1 month ago

@ekwoka I see no easy way to test this, the logic is almost entirely in @floating-ui/dom. Current e2e test is minimalist.