Focus & Click Away

onFocus, onBlur, and onClickAway hooks for focus management.

import { html, atom, onClickAway, onFocus, onBlur } from 'mates';

const SearchBox = () => {
  const open = atom(false);
  const focused = atom(false);

  onFocus(() => focused.set(true));
  onBlur(() => focused.set(false));
  onClickAway(() => open.set(false));

  return () => html`
    <div>
      <input @focus=${() => open.set(true)} placeholder="Search…" />
      ${open() ? html`<ul><li>Result…</li></ul>` : ''}
    </div>
  `;
};

Overview

onClickAway(fn) fires on mousedown outside the component host — the standard pattern for dismissing dropdowns, popovers, and menus.

onFocus / onBlur listen on window for the browser window gaining or losing focus (not individual inputs). Use template @focus / @blur for element-level focus.

Focus & dismiss

API	Target	Notes
`onClickAway(fn)`	document mousedown	Fires when click target is outside the host element.
`onFocus(fn)`	window focus	Browser/tab regained focus — not per-element.
`onBlur(fn)`	window blur	Browser/tab lost focus.

Dropdown with onClickAway

onClickAway registers a document-level listener that fires whenever the user clicks outside the component's root element. The listener is removed automatically on unmount — no manual cleanup needed.

import { html, atom, nothing, onClickAway, renderApp } from 'mates';

const App = () => {

const open = atom(false);

const selected = atom('Choose…');

// Closes the dropdown when the user clicks anywhere outside this component

onClickAway(() => open.set(false));

const options = ['Apple', 'Banana', 'Cherry', 'Mango'];

return () => html`

<div>

${selected()} ▾

</button>

${open() ? html`

${options.map(opt => html`

<button class="btn-ghost btn-block"

@click=${() => { selected.set(opt); open.set(false); }}>

${opt}

</button>

`)}

</div>

` : nothing}

<p class="label m-t-10">Click outside to close</p>

</div>

};

renderApp(App, document.getElementById('app'));

API — onClickAway / onFocus / onBlur

import { onClickAway, onFocus, onBlur } from 'mates'

Prop / Option	Type	Default	Description
`onClickAway(fn)`	`void`	—	Fires fn whenever the user mousedown-clicks outside the component's host element. The listener is automatically removed when the component unmounts. Ideal for closing dropdowns, popups, and modals.
`onFocus(fn)`	`void`	—	Fires fn when the browser window gains focus (window focus event). Useful for re-fetching stale data when the user returns to the tab. Listener auto-removed on unmount.
`onBlur(fn)`	`void`	—	Fires fn when the browser window loses focus (window blur event). Useful for pausing animations, timers, or subscriptions when the user leaves the tab. Listener auto-removed on unmount.