From e95171a0d4a6d8c0a296addda96e7b4520d2792b Mon Sep 17 00:00:00 2001
From: renee-png <renee@avriacam.com>
Date: Sun, 19 Jul 2026 19:46:33 -0400
Subject: [PATCH] Make remaining date inputs Safari-safe (uncontrolled)

Attendance filter, gradebook assignment date, and tuition entry date now use
defaultValue (with a remount key where the field resets after submit).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/gradebook.tsx               | 5 +++--
 src/routes/_authenticated/attendance.tsx   | 2 +-
 src/routes/_authenticated/students.$id.tsx | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/gradebook.tsx b/src/components/gradebook.tsx
index 245dc6d..00af8ec 100644
--- a/src/components/gradebook.tsx
+++ b/src/components/gradebook.tsx
@@ -221,6 +221,7 @@ export function GradebookGrid({ classId, canEdit }: { classId: string; canEdit:
   });
 
   const [na, setNa] = useState({ name: "", category_id: "", max_points: "100", date: "" });
+  const [dateKey, setDateKey] = useState(0); // bump to remount the uncontrolled date input after adding
   const addAssignment = useMutation({
     mutationFn: async () => {
       if (!na.name.trim()) throw new Error("Assignment name required");
@@ -231,7 +232,7 @@ export function GradebookGrid({ classId, canEdit }: { classId: string; canEdit:
       });
       if (error) throw error;
     },
-    onSuccess: () => { setNa({ name: "", category_id: "", max_points: "100", date: "" }); qc.invalidateQueries({ queryKey: ["assignments", classId] }); toast.success("Assignment added"); },
+    onSuccess: () => { setNa({ name: "", category_id: "", max_points: "100", date: "" }); setDateKey((k) => k + 1); qc.invalidateQueries({ queryKey: ["assignments", classId] }); toast.success("Assignment added"); },
     onError: (e: Error) => toast.error(e.message),
   });
   const delAssignment = useMutation({
@@ -253,7 +254,7 @@ export function GradebookGrid({ classId, canEdit }: { classId: string; canEdit:
               <SelectContent>{cfg.categories.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}</SelectContent>
             </Select>
             <Input type="number" placeholder="Max pts" value={na.max_points} onChange={(e) => setNa({ ...na, max_points: e.target.value })} />
-            <Input type="date" value={na.date} onChange={(e) => setNa({ ...na, date: e.target.value })} />
+            <Input key={dateKey} type="date" defaultValue={na.date} onChange={(e) => setNa({ ...na, date: e.target.value })} />
             <Button onClick={() => addAssignment.mutate()} disabled={addAssignment.isPending}><Plus className="h-4 w-4 mr-1" /> Add</Button>
           </div>
         </div>
diff --git a/src/routes/_authenticated/attendance.tsx b/src/routes/_authenticated/attendance.tsx
index ba5f7b1..1ca0a37 100644
--- a/src/routes/_authenticated/attendance.tsx
+++ b/src/routes/_authenticated/attendance.tsx
@@ -69,7 +69,7 @@ function AttendancePage() {
             <SelectContent>{(classes ?? []).map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}</SelectContent>
           </Select>
         </div>
-        <Input type="date" className="w-44" value={date} onChange={(e) => setDate(e.target.value)} />
+        <Input type="date" className="w-44" defaultValue={date} onChange={(e) => setDate(e.target.value)} />
       </div>
 
       {classId && (
diff --git a/src/routes/_authenticated/students.$id.tsx b/src/routes/_authenticated/students.$id.tsx
index e1b0ef7..a44d2ef 100644
--- a/src/routes/_authenticated/students.$id.tsx
+++ b/src/routes/_authenticated/students.$id.tsx
@@ -734,7 +734,7 @@ function LedgerTab({ studentId, canEdit }: { studentId: string; canEdit: boolean
           <div className="grid grid-cols-5 gap-2">
             <select className="border rounded-md px-2 text-sm" value={form.kind} onChange={(e) => setForm({ ...form, kind: e.target.value })}><option value="charge">Charge</option><option value="payment">Payment</option></select>
             <select className="border rounded-md px-2 text-sm" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })}><option value="tuition">Tuition</option><option value="late_pickup">Late pickup</option><option value="activity">Activity</option><option value="other">Other</option></select>
-            <Input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
+            <Input type="date" defaultValue={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
             <Input placeholder="Amount ($)" value={form.amount} onChange={(e) => setForm({ ...form, amount: e.target.value })} />
             <Input placeholder="Note" value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} />
           </div>