From b23dce194184aebbbabf32f25ad1c994b31904b9 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:30:08 +0800
Subject: [PATCH] fix: add validation for myinfo child name field  (#7875)

* fix: add validation rules to subfields and name field

* fix: name the index as child name index
---
 .../ChildrenCompoundField.tsx                 | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx b/frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx
index f70ed39d6c..ed763a3d32 100644
--- a/frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx
+++ b/frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import {
   Controller,
   FieldArrayWithId,
@@ -36,6 +36,7 @@ import {
 } from '~shared/types'
 import { formatMyinfoDate } from '~shared/utils/dates'
 
+import { REQUIRED_ERROR } from '~constants/validation'
 import { createChildrenValidationRules } from '~utils/fieldValidation'
 import { Button } from '~components/Button/Button'
 import { DatePicker } from '~components/DatePicker'
@@ -202,6 +203,8 @@ interface ChildrenBodyProps {
   error: FieldError[] | undefined
 }
 
+const CHILD_NAME_INDEX = 0
+
 const ChildrenBody = ({
   currChildBodyIdx,
   schema,
@@ -222,19 +225,11 @@ const ChildrenBody = ({
     [schema._id, currChildBodyIdx],
   )
 
-  const validationRules = useMemo(
+  const childrenValidationRules = useMemo(
     () => createChildrenValidationRules(schema, disableRequiredValidation),
     [schema, disableRequiredValidation],
   )
 
-  const childNameRef = useRef<HTMLInputElement | null>(null)
-
-  const childNameError = error
-    ? error.find(
-        (e) => (e?.ref as HTMLInputElement)?.id === childNameRef.current?.id,
-      )
-    : undefined
-
   const childName = watch(childNamePath) as unknown as string
 
   const allChildren = useMemo<string[]>(() => {
@@ -322,16 +317,21 @@ const ChildrenBody = ({
         <FormLabel gridArea="formlabel">Child</FormLabel>
         <Flex align="stretch" alignItems="stretch" justify="space-between">
           <Box flexGrow={10}>
-            <FormControl key={field.id} isRequired isInvalid={!!childNameError}>
+            <FormControl
+              key={field.id}
+              isRequired
+              isInvalid={!!error?.[CHILD_NAME_INDEX]}
+            >
               <Controller
                 control={control}
                 name={childNamePath}
-                rules={validationRules}
+                rules={{
+                  required: REQUIRED_ERROR,
+                }}
                 render={({
                   field: { value, onChange, onBlur, ref, ...rest },
                 }) => (
                   <SingleSelect
-                    isRequired
                     {...rest}
                     placeholder={"Select your child's name"}
                     colorScheme={`theme-${colorTheme}`}
@@ -339,16 +339,12 @@ const ChildrenBody = ({
                     value={value as unknown as string}
                     isDisabled={isSubmitting}
                     onChange={onChange}
-                    ref={(e) => {
-                      ref(e)
-                      if (e) {
-                        childNameRef.current = e
-                      }
-                    }}
                   />
                 )}
               />
-              <FormErrorMessage>{childNameError?.message}</FormErrorMessage>
+              <FormErrorMessage>
+                {error?.[CHILD_NAME_INDEX]?.message}
+              </FormErrorMessage>
             </FormControl>
           </Box>
           <IconButton
@@ -406,7 +402,7 @@ const ChildrenBody = ({
                     {MYINFO_ATTRIBUTE_MAP[subField].description}
                   </FormLabel>
                   <ChakraInput
-                    {...register(fieldPath, validationRules)}
+                    {...register(fieldPath, childrenValidationRules)}
                     value={value}
                   />
                   <FormErrorMessage>
@@ -432,7 +428,7 @@ const ChildrenBody = ({
                   <Controller
                     control={control}
                     name={fieldPath}
-                    rules={validationRules}
+                    rules={childrenValidationRules}
                     render={({
                       field: { value, onChange, onBlur, ...rest },
                     }) => (
@@ -467,7 +463,7 @@ const ChildrenBody = ({
                   <Controller
                     control={control}
                     name={fieldPath}
-                    rules={validationRules}
+                    rules={childrenValidationRules}
                     render={({ field: { value, onChange, ...rest } }) => (
                       <DatePicker
                         {...rest}