From 0740f2d094c7d3ed32d5ec03ea611edc16da59f6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 13:01:56 +0700
Subject: [PATCH] refactor(FE-114): ensure fields are marked as touched on
 change for better validation handling

---
 .../flock/recording/form/RecordingForm.tsx    | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index f4d2655e..d0286b10 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -568,7 +568,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   required
                   label='Lokasi'
                   value={formik.values.location ?? undefined}
-                  onChange={locationChangeHandler}
+                  onChange={(val) => {
+                    formik.setFieldTouched('location', true);
+                    formik.setFieldTouched('location_id', true);
+                    locationChangeHandler(val);
+                  }}
                   options={locationOptions}
                   onInputChange={setLocationSelectInputValue}
                   isLoading={isLoadingLocations}
@@ -613,7 +617,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   required
                   label='Flock'
                   value={formik.values.flock ?? undefined}
-                  onChange={flockChangeHandler}
+                  onChange={(val) => {
+                    formik.setFieldTouched('flock', true);
+                    formik.setFieldTouched('flock_id', true);
+                    flockChangeHandler(val);
+                  }}
                   options={flockOptions}
                   onInputChange={setFlockSelectInputValue}
                   isLoading={isLoadingFlocks}
@@ -635,7 +643,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   required
                   label='Kandang'
                   value={formik.values.coop ?? undefined}
-                  onChange={coopChangeHandler}
+                  onChange={(val) => {
+                    formik.setFieldTouched('coop', true);
+                    formik.setFieldTouched('coop_id', true);
+                    coopChangeHandler(val);
+                  }}
                   options={coopOptions}
                   isError={
                     formik.touched.coop_id && Boolean(formik.errors.coop_id)
@@ -737,6 +749,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   ) ?? '')
                                 : '';
 
+                              formik.setFieldTouched(
+                                `feed_data.${idx}.feed`,
+                                true
+                              );
+                              formik.setFieldTouched(
+                                `feed_data.${idx}.feed_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed`,
                                 val
@@ -1193,6 +1213,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     productWarehouseId as number
                                   ) ?? '')
                                 : '';
+                              formik.setFieldTouched(
+                                `vaccination.${idx}.vaccine`,
+                                true
+                              );
+                              formik.setFieldTouched(
+                                `vaccination.${idx}.vaccine_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
                                 val
@@ -1413,6 +1441,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               (opt) => opt.value === mortality.condition
                             )}
                             onChange={(val) => {
+                              formik.setFieldTouched(
+                                `mortality.${idx}.condition`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `mortality.${idx}.condition`,
                                 (val as OptionType)?.value