submitOnClose

Why JS.

tsx

import { submitOnClose } from "@sdxc/ui/app";

View code

tsx

// FilterMenu's form carries submitOnClose(), so the labels post once when the popover closes.
<FilterMenu
	id="issue-labels"
	mode="multiple"
	name="label"
	action="/acme/delta/issues/231/labels"
	trigger="Labels"
	groups={[{ label: "Labels", items: labels.map((label) => ({
		value: label.id,
		label: label.name,
		description: label.description,
		color: label.color,
		selected: issue.labels.includes(label.id),
	})) }]}
	labels={{
		title: "Apply labels to this issue",
		filter: "Filter labels",
		empty: "No labels match",
		more: "{count} more",
		save: "Save",
	}}
/>

Usage

Applied to an element inside a form inside a popover: records the form's values each time the popover opens and, when it closes holding different values, submits the form through requestSubmit, so the app's own submit handling (a frame, a fetch) takes the request.

Signature

typescript

submitOnClose(): MixinDescriptor<HTMLElement>

Examples

tsx

<div mix={[submitOnClose()]}>{checkboxes}</div>