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

<div data-controller="tooltip" data-action="click@outside->tooltip#close focus@outside->tooltip#close" data-tooltip-attached-to-value="#some-id">
  Tooltip content
</div>

<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

1. Don't implement this - instead it could be built as a custom event option, maybe just document it
2. Implementation via an action filter (like keyboard events) or a built in option (like prevent)

Links

• Inspired by Alpine JS' outside directive https://alpinejs.dev/directives/on#outside
• How to handle outside click with Stimulus #208 - this was closed, as the solution is quite simple, however since then there have been more Additions to the built in action syntax
• https://github.com/stimulus-use/stimulus-use/blob/main/docs/use-click-outside.md - a util to add this behaviour to any controller
• https://discuss.hotwired.dev/t/best-practices-for-handling-clicks-outside-element/1266/5