From cc20f20fe3b82f046833e9cf6d1d2e3220e754cc Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Tue, 25 Aug 2026 02:23:22 -0400
Subject: [PATCH] fix: uncontrolled Polaris TextFields couldn't be typed into
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

app.locations.new.tsx's "Location name"/"Address" fields and
app.blackouts._index.tsx's "Date"/"Reason" fields were missing
value/onChange — Polaris TextField is fully controlled, so without that
wiring every keystroke gets overwritten back to an empty string on
re-render, making the field appear frozen. Every other form in the app
already followed the value/onChange + useState pattern; these four fields
were the only ones missed, and went uncaught until live browser testing
was actually possible tonight (shopify.web.toml was missing until now).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/routes/app.blackouts._index.tsx |  7 +++++--
 app/routes/app.locations.new.tsx    | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/routes/app.blackouts._index.tsx b/app/routes/app.blackouts._index.tsx
index ce55f5c..4c9ea9d 100644
--- a/app/routes/app.blackouts._index.tsx
+++ b/app/routes/app.blackouts._index.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { data, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
 import { Form, useLoaderData, useNavigation } from "@remix-run/react";
 import {
@@ -71,6 +72,8 @@ export default function BlackoutsIndex() {
   const { locations, blackouts } = useLoaderData<typeof loader>();
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
+  const [date, setDate] = useState("");
+  const [reason, setReason] = useState("");
 
   if (locations.length === 0) {
     return (
@@ -140,7 +143,7 @@ export default function BlackoutsIndex() {
                 Add a blackout date
               </Text>
               <InlineStack gap="300" wrap>
-                <TextField label="Date" name="date" type="date" autoComplete="off" />
+                <TextField label="Date" name="date" type="date" autoComplete="off" value={date} onChange={setDate} />
                 <Select
                   label="Location"
                   name="locationId"
@@ -154,7 +157,7 @@ export default function BlackoutsIndex() {
                     ...METHODS.map((m) => ({ label: m.replace("_", " "), value: m })),
                   ]}
                 />
-                <TextField label="Reason (optional)" name="reason" autoComplete="off" />
+                <TextField label="Reason (optional)" name="reason" autoComplete="off" value={reason} onChange={setReason} />
               </InlineStack>
               <div>
                 <Button submit variant="primary" loading={isSubmitting}>
diff --git a/app/routes/app.locations.new.tsx b/app/routes/app.locations.new.tsx
index 65aa5ea..311015c 100644
--- a/app/routes/app.locations.new.tsx
+++ b/app/routes/app.locations.new.tsx
@@ -41,6 +41,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 export default function NewLocation() {
   const actionData = useActionData<typeof action>();
   const navigation = useNavigation();
+  const [name, setName] = useState("");
+  const [address, setAddress] = useState("");
   const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
 
   return (
@@ -61,10 +63,19 @@ export default function NewLocation() {
               label="Location name"
               name="name"
               autoComplete="off"
+              value={name}
+              onChange={setName}
               error={actionData?.errors?.name}
               requiredIndicator
             />
-            <TextField label="Address" name="address" autoComplete="off" multiline={2} />
+            <TextField
+              label="Address"
+              name="address"
+              autoComplete="off"
+              multiline={2}
+              value={address}
+              onChange={setAddress}
+            />
             <TextField
               label="Timezone (IANA, e.g. America/Toronto)"
               name="timezone"