Add x-anchor.noflip modifier

packages/anchor/src/index.js

@@ -14,7 +14,7 @@ export default function (Alpine) {
     })
 
     Alpine.directive('anchor', Alpine.skipDuringClone((el, { expression, modifiers, value }, { cleanup, evaluate }) => {
-        let { placement, offsetValue, unstyled } = getOptions(modifiers)
+        let { placement, offsetValue, unstyled, allowFlip } = getOptions(modifiers)
 
         el._x_anchor = Alpine.reactive({ x: 0, y: 0 })
 
@@ -27,7 +27,7 @@ export default function (Alpine) {
 
             computePosition(reference, el, {
                 placement,
-                middleware: [flip(), shift({padding: 5}), offset(offsetValue)],
+                middleware: [allowFlip && flip(), shift({padding: 5}), offset(offsetValue)],
             }).then(({ x, y }) => {
                 unstyled || setStyles(el, x, y)
 
@@ -72,6 +72,7 @@ function getOptions(modifiers) {
         offsetValue = modifiers[idx + 1] !== undefined ? Number(modifiers[idx + 1]) : offsetValue
     }
     let unstyled = modifiers.includes('no-style')
+    let allowFlip = ! modifiers.includes('noflip')
 
-    return { placement, offsetValue, unstyled }
+    return { placement, offsetValue, unstyled, allowFlip }
 }

packages/docs/src/en/plugins/anchor.md

@@ -143,6 +143,35 @@ You can add an offset to your anchored element using the `.offset.[px value]` mo
 </div>
 <!-- END_VERBATIM -->
 
+<a name="prevent-flipping"></a>
+## Prevent flipping position
+
+By default, `x-anchor` will flip the position of the anchored element if it doesn't have enough room to render below the reference element.
+
+You can prevent this behavior by adding the `.noflip` modifier:
+
+```alpine
+<div x-data="{ open: false }">
+    <button x-ref="button" @click="open = ! open">Toggle</button>
+
+    <div x-show="open" x-anchor.noflip="$refs.button">
+        Dropdown content
+    </div>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data="{ open: false }" class="demo overflow-hidden">
+    <div class="flex justify-center">
+        <button x-ref="button" @click="open = ! open">Toggle</button>
+    </div>
+
+    <div x-show="open" x-anchor.noflip="$refs.button" class="bg-white rounded p-4 border shadow z-10">
+        Dropdown content
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
 <a name="manual-styling"></a>
 ## Manual styling
 
@@ -210,4 +239,3 @@ Because `x-anchor` accepts a reference to any DOM element, you can use utilities
     </div>
 </div>
 <!-- END_VERBATIM -->
-