fix: uncontrolled Polaris TextFields couldn't be typed into
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled

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>
This commit is contained in:
metatroncubeswdev 2026-08-25 02:23:22 -04:00
parent 4a1d4e323f
commit cc20f20fe3
2 changed files with 17 additions and 3 deletions

View File

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

View File

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