Feature request - Action option or global handling of 'outside' events #656

lb- · 2023-02-11T08:46:15Z

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

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)

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

The text was updated successfully, but these errors were encountered:

seb-jean · 2023-03-25T12:08:44Z

It would be great to have an 'outside' event.
It would be useful for dialog and dropdown.

@document

- When using `@outside`, it will behave the same as @document but only trigger the action if the event was triggered from outside the controlled element - Closes hotwired#656

lb- · 2023-06-20T22:05:46Z

Put this PR together, hope that is ok. #695

@document