fix: make weekday/method/location/zone Selects controlled in admin forms
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:
metatroncubeswdev 2026-09-04 02:48:44 -04:00
parent d98b29ec76
commit f8dd5b2586
3 changed files with 27 additions and 1 deletions

View File

@ -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 })),

View File

@ -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 }))}
/>
) : (

View File

@ -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