fix: uncontrolled Polaris TextFields couldn't be typed into
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
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:
parent
4a1d4e323f
commit
cc20f20fe3
@ -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}>
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user