Action to control focusin and focusout for Svelte directive use

• no dependencies
• based on focusin and focusout events.
• correctly detects loss of focus with tab key

Docs & Demo

Install

NPM

npm i -D @apsc/focus-action

PNPM

pnpm add -D @apsc/focus-action

API

let focused = false;
const focusFns = [() => (focused = true), () => (focused = false)];

<div class:focused use:useFocus={focusFns}>
  ...
</div>;

Based on focusin and focusout events.

Executes callbacks when the node or its children gain or lose focus.

Ensure the node or its children can be focused