@studiometa/ui

Appearance

JS API ​

The ClickOutside primitive has no options or refs. It listens to clicks on the document and, whenever one lands outside of its root element, dispatches a single click-outside event on that element. It is meant to be paired with the Action component on the same element to react to the event declaratively.

Events ​

click-outside ​

  • Type: CustomEvent
  • Bubbles: false
  • Detail: { event: MouseEvent }

Dispatched on the component's root element when a click occurs outside of it. The detection uses Event.composedPath(), so a click on the element itself or on any of its descendants is considered inside and does not trigger the event.

The original MouseEvent that triggered the detection is forwarded on the detail.event property.

Listening with Action ​

Because Action binds native listeners on its element, add both components to the same element and use the on:<event> option to react to the emitted event:

html
<div
  data-component="ClickOutside Action"
  data-on:click-outside="this.hidden = true">
  ...
</div>

Accessing the original event ​

The original MouseEvent is available through event.detail.event in the effect:

html
<div
  data-component="ClickOutside Action"
  data-on:click-outside="console.log(event.detail.event.target)">
  ...
</div>