NOTE: Introduced feature in
v0.5.0
.
lost_focus
is a Svelte Action, which runs a on_lost_focus(): void
callback whenever another element is focused which is not a child of the attached element, OR, the Browser window / tab is no longer actively focused.
<script>
import {
Button,
TextInput,
lost_focus,
} from "@kahi-ui/framework";
let has_focus = false;
</script>
<TextInput
palette={has_focus ? "affirmative" : "negative"}
actions={[
[
lost_focus,
{
enabled: has_focus,
on_lost_focus: () =>
(has_focus = false),
},
],
]}
on:focusin={() => (has_focus = true)}
/>
<Button>Focus me!</Button>
Imports
import {lost_focus} from "@kahi-ui/framework";
Compatibility
Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement.
Ignore
You can ignore elements that matches a given CSS Selector via the ILostFocusOptions.ignore: string
option.
TODO: snippet