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 { data, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
import { Form, useLoaderData, useNavigation } from "@remix-run/react"; import { Form, useLoaderData, useNavigation } from "@remix-run/react";
import { import {
@ -71,6 +72,8 @@ export default function BlackoutsIndex() {
const { locations, blackouts } = useLoaderData<typeof loader>(); const { locations, blackouts } = useLoaderData<typeof loader>();
const navigation = useNavigation(); const navigation = useNavigation();
const isSubmitting = navigation.state === "submitting"; const isSubmitting = navigation.state === "submitting";
const [date, setDate] = useState("");
const [reason, setReason] = useState("");
if (locations.length === 0) { if (locations.length === 0) {
return ( return (
@ -140,7 +143,7 @@ export default function BlackoutsIndex() {
Add a blackout date Add a blackout date
</Text> </Text>
<InlineStack gap="300" wrap> <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 <Select
label="Location" label="Location"
name="locationId" name="locationId"
@ -154,7 +157,7 @@ export default function BlackoutsIndex() {
...METHODS.map((m) => ({ label: m.replace("_", " "), value: m })), ...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> </InlineStack>
<div> <div>
<Button submit variant="primary" loading={isSubmitting}> <Button submit variant="primary" loading={isSubmitting}>

View File

@ -41,6 +41,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
export default function NewLocation() { export default function NewLocation() {
const actionData = useActionData<typeof action>(); const actionData = useActionData<typeof action>();
const navigation = useNavigation(); const navigation = useNavigation();
const [name, setName] = useState("");
const [address, setAddress] = useState("");
const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone); const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
return ( return (
@ -61,10 +63,19 @@ export default function NewLocation() {
label="Location name" label="Location name"
name="name" name="name"
autoComplete="off" autoComplete="off"
value={name}
onChange={setName}
error={actionData?.errors?.name} error={actionData?.errors?.name}
requiredIndicator requiredIndicator
/> />
<TextField label="Address" name="address" autoComplete="off" multiline={2} /> <TextField
label="Address"
name="address"
autoComplete="off"
multiline={2}
value={address}
onChange={setAddress}
/>
<TextField <TextField
label="Timezone (IANA, e.g. America/Toronto)" label="Timezone (IANA, e.g. America/Toronto)"
name="timezone" name="timezone"