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 isSubmitting = navigation.state === "submitting";
|
||||||
const [date, setDate] = useState("");
|
const [date, setDate] = useState("");
|
||||||
const [reason, setReason] = 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) {
|
if (locations.length === 0) {
|
||||||
return (
|
return (
|
||||||
@ -150,11 +153,15 @@ export default function BlackoutsIndex() {
|
|||||||
<Select
|
<Select
|
||||||
label="Location"
|
label="Location"
|
||||||
name="locationId"
|
name="locationId"
|
||||||
|
value={locationId}
|
||||||
|
onChange={setLocationId}
|
||||||
options={[{ label: "All locations", value: "" }, ...locations.map((l) => ({ label: l.name, value: l.id }))]}
|
options={[{ label: "All locations", value: "" }, ...locations.map((l) => ({ label: l.name, value: l.id }))]}
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
label="Method"
|
label="Method"
|
||||||
name="method"
|
name="method"
|
||||||
|
value={method}
|
||||||
|
onChange={setMethod}
|
||||||
options={[
|
options={[
|
||||||
{ label: "All methods", value: "" },
|
{ label: "All methods", value: "" },
|
||||||
...METHODS.map((m) => ({ label: m.replace("_", " "), value: m })),
|
...METHODS.map((m) => ({ label: m.replace("_", " "), value: m })),
|
||||||
|
|||||||
@ -195,6 +195,8 @@ function AddRateForm({
|
|||||||
isSubmitting: boolean;
|
isSubmitting: boolean;
|
||||||
}) {
|
}) {
|
||||||
const [keyedBy, setKeyedBy] = useState("zone");
|
const [keyedBy, setKeyedBy] = useState("zone");
|
||||||
|
const [method, setMethod] = useState<Method>(METHODS[0]);
|
||||||
|
const [zoneId, setZoneId] = useState(zones[0]?.id ?? "");
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [price, setPrice] = useState("");
|
const [price, setPrice] = useState("");
|
||||||
const [minDistanceKm, setMinDistanceKm] = useState("");
|
const [minDistanceKm, setMinDistanceKm] = useState("");
|
||||||
@ -209,12 +211,20 @@ function AddRateForm({
|
|||||||
</Text>
|
</Text>
|
||||||
<InlineStack gap="300" wrap>
|
<InlineStack gap="300" wrap>
|
||||||
<TextField label="Name" name="name" autoComplete="off" value={name} onChange={setName} />
|
<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} />
|
<Select label="Keyed by" name="keyedBy" options={KEYED_BY_OPTIONS} value={keyedBy} onChange={setKeyedBy} />
|
||||||
{keyedBy === "zone" ? (
|
{keyedBy === "zone" ? (
|
||||||
<Select
|
<Select
|
||||||
label="Zone"
|
label="Zone"
|
||||||
name="zoneId"
|
name="zoneId"
|
||||||
|
value={zoneId}
|
||||||
|
onChange={setZoneId}
|
||||||
options={zones.map((z) => ({ label: `${z.name} (${z.location.name})`, value: z.id }))}
|
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 }) {
|
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 [startTime, setStartTime] = useState("09:00");
|
||||||
const [endTime, setEndTime] = useState("17:00");
|
const [endTime, setEndTime] = useState("17:00");
|
||||||
const [capacity, setCapacity] = useState("10");
|
const [capacity, setCapacity] = useState("10");
|
||||||
@ -229,11 +234,15 @@ function AddSlotForm({ locationId, isSubmitting }: { locationId: string; isSubmi
|
|||||||
<Select
|
<Select
|
||||||
label="Weekday"
|
label="Weekday"
|
||||||
name="weekday"
|
name="weekday"
|
||||||
|
value={weekday}
|
||||||
|
onChange={setWeekday}
|
||||||
options={WEEKDAY_NAMES.map((name, value) => ({ label: name, value: String(value) }))}
|
options={WEEKDAY_NAMES.map((name, value) => ({ label: name, value: String(value) }))}
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
label="Method"
|
label="Method"
|
||||||
name="method"
|
name="method"
|
||||||
|
value={method}
|
||||||
|
onChange={(value) => setMethod(value as Method)}
|
||||||
options={METHODS.map((m) => ({ label: m.replace("_", " "), value: m }))}
|
options={METHODS.map((m) => ({ label: m.replace("_", " "), value: m }))}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user