diff --git a/packages/docs/src/en/plugins/focus.md b/packages/docs/src/en/plugins/focus.md index 69c11ee6f..af983cf05 100644 --- a/packages/docs/src/en/plugins/focus.md +++ b/packages/docs/src/en/plugins/focus.md @@ -308,6 +308,27 @@ By default, when `x-trap` traps focus within an element, it focuses the first fo By adding `.noautofocus`, Alpine will not automatically focus any elements when trapping focus. + +#### .preventscroll + +By default `x-trap` or rather `focus-trap` will scroll to the currently focussed element inside its content. Adding `.preventscroll`, disables this effect. + +For example: + +```alpine +
+ + +
+ Dialog Contents + + + + +
+
+``` + ## $focus diff --git a/packages/focus/src/index.js b/packages/focus/src/index.js index 11d1b6845..f75afc851 100644 --- a/packages/focus/src/index.js +++ b/packages/focus/src/index.js @@ -116,6 +116,10 @@ export default function (Alpine) { if (autofocusEl) options.initialFocus = autofocusEl } + if (modifiers.includes('preventscroll')) { + options.preventScroll = true + } + let trap = createFocusTrap(el, options) let undoInert = () => {}