The action options and global listeners are incredibly powerful. However, it would be great to fill in a common use case gap of an event that triggers only when outside the element is clicked.
Example use cases include focus traps, tooltips that close when something else it focused or clicked on, modals that can close when the user clicks outside the modal, dynamic form behaviour where blur is not suitable.
<div data-controller="focus-trap" data-action="focus@outside->focus-trap#keep keyup.tab->focus-trap#forward keyup.tab+shift->focus-trap#back">
An overlay around a modal.
</div>
Alternative solutions
Don't implement this - instead it could be built as a custom event option, maybe just document it
Implementation via an action filter (like keyboard events) or a built in option (like prevent)
Summary
The action options and global listeners are incredibly powerful. However, it would be great to fill in a common use case gap of an event that triggers only when outside the element is clicked.
Example use cases include focus traps, tooltips that close when something else it focused or clicked on, modals that can close when the user clicks outside the modal, dynamic form behaviour where blur is not suitable.
Proposed usage
Alternative solutions
Links
outside
directive https://alpinejs.dev/directives/on#outside