Available since v0.1.0

Fires when the element gains focus. Implemented as an alias for focusin, which bubbles to document-level capture listeners (unlike the non-bubbling focus event).

Syntax

<input type="text"
  fs-assert="search/reveal-suggestions"
  fs-trigger="focus"
  fs-assert-visible=".suggestions-panel">

When to use it

• Reveal-on-focus UI (suggestions dropdown, tooltip, help text)
• First-interaction tracking on a form field
• Onboarding or tour triggers tied to a specific input

Example

<input type="search"
  fs-assert="header/open-search"
  fs-trigger="focus"
  fs-assert-visible=".search-dropdown">

Pairs well with

• fs-assert-visible — a helper panel becomes visible
• fs-assert-added — a helper panel is lazily mounted on focus
• [focused=true] — verify focus landed on the expected element

Gotchas

• Programmatic focus fires the event too. Calling .focus() in JS triggers the assertion. Use a different assertion key or guard against unintended triggers in your handler.
• Tab-through focus races. Rapidly tabbing through fields may fire and cancel focus triggers quickly. Increase fs-assert-timeout if race conditions matter.

See also

• blur — the complementary trigger
• [focused=true] — focus-state modifier
• Triggers index