hey @marckohlbrugge
FYI I released a new version of Stimulus Use and you now have a click outside mixin available
import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'
export default class extends Controller {
connect() {
useClickOutside(this)
}
clickOutside(event) {
// example to close a modal
event.preventDefault()
this.modal.close()
}
}
# useClickOutside
Adds one new `clickOutside` behavior to your Stimulus controller as well as a new `click:outside` event when ever a click is received outside of the controller element.
## Reference
```javascript
useClickOutside(controller, options = {})
```
**controller** : a Stimulus Controller (usually `'this'`)
**options** :
| Option| Description | Default value |
|-----------------------|-------------|---------------------|
| `dispatchEvent` | Whether to dispatch a `click:outside` event or not.| `true` |
| `element` | The root element listening for outside click.| The controller element|
|`eventPrefix`| Whether to prefix or not the emitted event. Can be a **boolean** or a **string**.<br>- **true** prefix the event with the controller identifier `card:click:outside` <br>- **someString** prefix the event with the given string `someString:click:outside` <br>- **false** to remove prefix |true|
| `events` | Array of events to listen on to detect if the user clicks outside of the component.| `['click', 'touchend']` |
show original
3 Likes