From 8955baae26639f4734dbd2ba6d3b7c9c44c3cd2a Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Mon, 23 Mar 2026 19:44:01 -0500
Subject: [PATCH] fix: UX Bug on maintenance page

---
 .../maintenance/components/MaintenanceRecordForm.tsx        | 6 ++++--
 .../maintenance/components/MaintenanceScheduleForm.tsx      | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx b/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
index 0aff345..2f1cb18 100644
--- a/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
@@ -111,7 +111,7 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
     mode: 'onChange',
     defaultValues: {
       vehicle_id: vehicleId || '',
-      category: undefined as any,
+      category: '' as any,
       subtypes: [],
       date: new Date().toISOString().split('T')[0],
       odometer_reading: '' as any,
@@ -132,6 +132,8 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
     if (watchedCategory) {
       setSelectedCategory(watchedCategory as MaintenanceCategory);
       setValue('subtypes', []);
+    } else {
+      setSelectedCategory(null);
     }
   }, [watchedCategory, setValue]);
 
@@ -217,7 +219,7 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
       // Reset form
       reset({
         vehicle_id: '',
-        category: undefined as any,
+        category: '' as any,
         subtypes: [],
         date: new Date().toISOString().split('T')[0],
         odometer_reading: '' as any,
diff --git a/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx b/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
index 3996d8d..268483e 100644
--- a/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
@@ -119,7 +119,7 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
     mode: 'onChange',
     defaultValues: {
       vehicle_id: vehicleId || '',
-      category: undefined as any,
+      category: '' as any,
       subtypes: [],
       schedule_type: 'interval' as ScheduleType,
       interval_months: '' as any,
@@ -145,6 +145,8 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
     if (watchedCategory) {
       setSelectedCategory(watchedCategory as MaintenanceCategory);
       setValue('subtypes', []);
+    } else {
+      setSelectedCategory(null);
     }
   }, [watchedCategory, setValue]);
 
@@ -170,7 +172,7 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
       // Reset form
       reset({
         vehicle_id: '',
-        category: undefined as any,
+        category: '' as any,
         subtypes: [],
         schedule_type: 'interval' as ScheduleType,
         interval_months: '' as any,