Hardik
f4c8ec7585
Per review: the five named PO T&C slots now allow a one-off custom clause as well as picking a catalogued one. TermsField becomes a native <input list> + <datalist> combobox (still plain FormData, no form/page changes). Any current/ custom value is preserved as the input value. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* A single PO Terms & Conditions slot (issue #11) — a combobox: type a one-off
|
|
* clause OR pick a catalogued one. Implemented as a native <input list> +
|
|
* <datalist> so it stays free-text (custom wording per PO) while suggesting the
|
|
* admin-managed clauses for this category, and submits via plain FormData.
|
|
*
|
|
* `options` are the active clause texts (suggestions). `current` is the PO's
|
|
* existing/default value for this slot; it's just the input's initial value, so
|
|
* a value not in the catalogue is preserved as-is.
|
|
*/
|
|
export function TermsField({
|
|
field,
|
|
options,
|
|
current,
|
|
className,
|
|
}: {
|
|
field: string;
|
|
options: string[];
|
|
current?: string | null;
|
|
className?: string;
|
|
}) {
|
|
const listId = `terms-list-${field}`;
|
|
return (
|
|
<>
|
|
<input
|
|
name={field}
|
|
list={listId}
|
|
defaultValue={current ?? ""}
|
|
autoComplete="off"
|
|
placeholder="Type a clause or pick one…"
|
|
className={className}
|
|
/>
|
|
<datalist id={listId}>
|
|
{options.map((o) => (
|
|
<option key={o} value={o} />
|
|
))}
|
|
</datalist>
|
|
</>
|
|
);
|
|
}
|