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 { 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}>
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user