invokerFields

Why JS: a dialog or popover opened by an invoker button cannot read that button's value.

tsx

import { invokerFields } from "@sdxc/ui/mixins";

View code

tsx

<Button commandfor="new-ticket" command="show-modal">New ticket</Button>
<Button commandfor="new-ticket" command="show-modal" name="type" value="bug">Report a bug</Button>
<Button commandfor="new-ticket" command="show-modal" name="type" value="feature">Request a feature</Button>

<Dialog id="new-ticket" aria-labelledby="new-ticket-title">
	<span hidden mix={[invokerFields()]} />
	<form method="dialog">
		<Dialog.Header>
			<Dialog.Title id="new-ticket-title">New ticket</Dialog.Title>
		</Dialog.Header>
		<TextField label="Subject" name="subject" />
		<Label htmlFor="new-ticket-type">Type</Label>
		<Select id="new-ticket-type" name="type">
			<Select.Option value="question" selected>Question</Select.Option>
			<Select.Option value="bug">Bug</Select.Option>
			<Select.Option value="feature">Feature request</Select.Option>
		</Select>
		<Dialog.Footer>
			<Button commandfor="new-ticket" command="close" variant="outline">Cancel</Button>
			<Button type="submit">Create</Button>
		</Dialog.Footer>
	</form>
</Dialog>

Usage

Presets the fields of the dialog or popover around the host from the button that opens it: an invoker carrying name and value sets the target's field of that name to that value. Once the target closes, each preset field returns to the value it held before, so the next opener starts where the form was.

Signature

typescript

invokerFields(): MixinDescriptor<HTMLElement>

Examples

tsx

<button commandfor="new-issue" command="show-modal" name="status" value="done">+</button>

tsx

<span hidden mix={[invokerFields()]} />