[ @sdxc/ui/mixins ]
clearField
Wires a SearchField's clear button to empty its associated input alone, and keeps the button.
import { clearField } from "@sdxc/ui/mixins";Usage
Wires a SearchField's clear button to empty its own commandfor-resolved
input and dispatch input/change plus SearchFieldClearEvent before
refocusing the field, and shows the button exactly while that input holds text;
a disabled, read-only, or already-empty target leaves the press with no effect.
Signature
clearField(): MixinDescriptor<HTMLButtonElement>Returns a mixin descriptor for a SearchField clear button's mix prop.
Examples
<div>
<input id="site-search" type="search" name="q" />
<button
type="button"
hidden
commandfor="site-search"
command={SEARCH_FIELD_CLEAR_COMMAND}
aria-label={t("searchField.clear")}
mix={clearField()}
>
<XIcon />
</button>
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
SearchFieldClearEvent
Dispatched on a SearchField's input by clearField immediately after its value is emptied, carrying the text it held a moment before so a consumer can react to the clear — canceling an in-flight request for that term, or dropping a query param — using only this event.
new SearchFieldClearEvent(previousValue: string)| Property | Type | Description |
|---|---|---|
previousValue | readonly string | The input's value immediately before this clear. |
SEARCH_FIELD_CLEAR_COMMAND
Custom Invoker Command a SearchField's clear button declares
(command={SEARCH_FIELD_CLEAR_COMMAND}, commandfor pointing at the
field's input) so the pairing reads as a real invoker relationship in markup, matched by clearField through the button's own click.
const SEARCH_FIELD_CLEAR_COMMAND = "--clear" as const