From f8dd5b258609e3ba0eb7feeac5be9c40953a90f5 Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Fri, 4 Sep 2026 02:48:44 -0400
Subject: [PATCH] fix: make weekday/method/location/zone Selects controlled in
 admin forms
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/routes/app.blackouts._index.tsx |  7 +++++++
 app/routes/app.rates._index.tsx     | 12 +++++++++++-
 app/routes/app.slots._index.tsx     |  9 +++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/routes/app.blackouts._index.tsx b/app/routes/app.blackouts._index.tsx
index acb98ae..0fc495d 100644
--- a/app/routes/app.blackouts._index.tsx
+++ b/app/routes/app.blackouts._index.tsx
@@ -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 })),
diff --git a/app/routes/app.rates._index.tsx b/app/routes/app.rates._index.tsx
index 5df3ddd..8366fc3 100644
--- a/app/routes/app.rates._index.tsx
+++ b/app/routes/app.rates._index.tsx
@@ -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 }))}
               />
             ) : (
diff --git a/app/routes/app.slots._index.tsx b/app/routes/app.slots._index.tsx
index e8f5ccd..9527867 100644
--- a/app/routes/app.slots._index.tsx
+++ b/app/routes/app.slots._index.tsx
@@ -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