fix: make weekday/method/location/zone Selects controlled in admin forms
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
Polaris <Select> in this App Bridge + Polaris version is fully controlled — without value+onChange it renders but ignores the user's choice (same class of bug as commit cc20f20 for <TextField>). The "Add slot template", "Add blackout date" and "Add rate" forms each had one or more inert dropdowns, so nothing could be selected. Wired each to local state. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
d98b29ec76
commit
f8dd5b2586
@ -77,6 +77,9 @@ export default function BlackoutsIndex() {
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
const [date, setDate] = useState("");
|
||||
const [reason, setReason] = useState("");
|
||||
// Polaris Select needs value+onChange to register a choice (see slots route).
|
||||
const [locationId, setLocationId] = useState("");
|
||||
const [method, setMethod] = useState("");
|
||||
|
||||
if (locations.length === 0) {
|
||||
return (
|
||||
@ -150,11 +153,15 @@ export default function BlackoutsIndex() {
|
||||
<Select
|
||||
label="Location"
|
||||
name="locationId"
|
||||
value={locationId}
|
||||
onChange={setLocationId}
|
||||
options={[{ label: "All locations", value: "" }, ...locations.map((l) => ({ label: l.name, value: l.id }))]}
|
||||
/>
|
||||
<Select
|
||||
label="Method"
|
||||
name="method"
|
||||
value={method}
|
||||
onChange={setMethod}
|
||||
options={[
|
||||
{ label: "All methods", value: "" },
|
||||
...METHODS.map((m) => ({ label: m.replace("_", " "), value: m })),
|
||||
|
||||
@ -195,6 +195,8 @@ function AddRateForm({
|
||||
isSubmitting: boolean;
|
||||
}) {
|
||||
const [keyedBy, setKeyedBy] = useState("zone");
|
||||
const [method, setMethod] = useState<Method>(METHODS[0]);
|
||||
const [zoneId, setZoneId] = useState(zones[0]?.id ?? "");
|
||||
const [name, setName] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [minDistanceKm, setMinDistanceKm] = useState("");
|
||||
@ -209,12 +211,20 @@ function AddRateForm({
|
||||
</Text>
|
||||
<InlineStack gap="300" wrap>
|
||||
<TextField label="Name" name="name" autoComplete="off" value={name} onChange={setName} />
|
||||
<Select label="Method" name="method" options={METHODS.map((m) => ({ label: m.replace("_", " "), value: m }))} />
|
||||
<Select
|
||||
label="Method"
|
||||
name="method"
|
||||
value={method}
|
||||
onChange={(v) => setMethod(v as Method)}
|
||||
options={METHODS.map((m) => ({ label: m.replace("_", " "), value: m }))}
|
||||
/>
|
||||
<Select label="Keyed by" name="keyedBy" options={KEYED_BY_OPTIONS} value={keyedBy} onChange={setKeyedBy} />
|
||||
{keyedBy === "zone" ? (
|
||||
<Select
|
||||
label="Zone"
|
||||
name="zoneId"
|
||||
value={zoneId}
|
||||
onChange={setZoneId}
|
||||
options={zones.map((z) => ({ label: `${z.name} (${z.location.name})`, value: z.id }))}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@ -209,6 +209,11 @@ export default function SlotsIndex() {
|
||||
}
|
||||
|
||||
function AddSlotForm({ locationId, isSubmitting }: { locationId: string; isSubmitting: boolean }) {
|
||||
// Polaris Select is a controlled component — without value/onChange it
|
||||
// renders but won't register a selection (same class of bug as commit
|
||||
// cc20f20 for TextField). Keep weekday/method in local state.
|
||||
const [weekday, setWeekday] = useState("1");
|
||||
const [method, setMethod] = useState<Method>("SHIPPING");
|
||||
const [startTime, setStartTime] = useState("09:00");
|
||||
const [endTime, setEndTime] = useState("17:00");
|
||||
const [capacity, setCapacity] = useState("10");
|
||||
@ -229,11 +234,15 @@ function AddSlotForm({ locationId, isSubmitting }: { locationId: string; isSubmi
|
||||
<Select
|
||||
label="Weekday"
|
||||
name="weekday"
|
||||
value={weekday}
|
||||
onChange={setWeekday}
|
||||
options={WEEKDAY_NAMES.map((name, value) => ({ label: name, value: String(value) }))}
|
||||
/>
|
||||
<Select
|
||||
label="Method"
|
||||
name="method"
|
||||
value={method}
|
||||
onChange={(value) => setMethod(value as Method)}
|
||||
options={METHODS.map((m) => ({ label: m.replace("_", " "), value: m }))}
|
||||
/>
|
||||
<TextField
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user