Add "x-stop" directive to prevent further DOM walking #1036
Replies: 2 comments 3 replies
-
|
That doesn't need to go on the body. Events bubble up to the window and you can watch them from anywhere. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, but that doesn't really help when I need to conditionally set overflow-hidden on the body. And I want to have a keyboard-focus: variant in tailwind, so I don't have to turn all focusable elements into Alpine components. |
Beta Was this translation helpful? Give feedback.
-
|
In that case you should add the class to the body with Vanilla JS. You could have something like this: <body>
<!-- Your other elements -->
<div x-data @keydown.window.tab="document.body.classList.add('using-keyboard')"></div>
</body>If you're building a modal, you can use a watcher to handle the state: https://codepen.io/KevinBatdorf/pen/PoZZeox |
Beta Was this translation helpful? Give feedback.
-
|
That is clever - thanks for taking your time! I'll adjust to this, and get back if I find any other possible usecases for x-data on html or body :) |
Beta Was this translation helpful? Give feedback.
-
|
Just to add, this sort of idea was previously discussed in #395 and #393 but the outcome was that it wouldn't be implemented unless people could demonstrate more of a need. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
As stated in https://ryangjchandler.co.uk/articles/5-simple-alpinejs-tips-and-tricks#1-keep-your-components-small, large components, like adding
x-datato<body>can be a performance problem. Would it help if we had something likex-stopto stop walking through specific DOM nodes?A typical usecase I have is this
I use this to determine if the user is using the keyboard for navigating (so I can enhance the focus styles), or if a modal/dialog/whatever is visible, so I don't want the page to scroll beneath.
In this I could then add something like
<div x-stop, to have Alpine not walk the contents of that div. My complete markup could then beBeta Was this translation helpful? Give feedback.
All reactions