From 34488c412fbd182be786eea02a94ff5896d12105 Mon Sep 17 00:00:00 2001
From: Kathleen Koh <kathleen@open.gov.sg>
Date: Wed, 3 Apr 2024 17:38:56 +0800
Subject: [PATCH 1/2] fix: correct date validation for disabled fields

---
 frontend/src/templates/Field/Date/DateField.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/templates/Field/Date/DateField.tsx b/frontend/src/templates/Field/Date/DateField.tsx
index fbc636c711..ff9065ea11 100644
--- a/frontend/src/templates/Field/Date/DateField.tsx
+++ b/frontend/src/templates/Field/Date/DateField.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
+import { useParams } from 'react-router-dom'
 
 import { DATE_DISPLAY_FORMAT, DATE_PARSE_FORMAT } from '~shared/constants/dates'
 import { FormColorTheme } from '~shared/types'
@@ -32,11 +33,16 @@ export const DateField = ({
   colorTheme = FormColorTheme.Blue,
   ...fieldContainerProps
 }: DateFieldProps): JSX.Element => {
+  console.log('disable validaton', disableRequiredValidation)
   const validationRules = useMemo(
     () => createDateValidationRules(schema, disableRequiredValidation),
     [schema, disableRequiredValidation],
   )
 
+  console.log('validation rules', validationRules)
+  const { submissionId } = useParams()
+  console.log('submission id', submissionId)
+
   const isDateUnavailable = useCallback(
     (date: Date) => {
       const { selectedDateValidation } = schema.dateValidation
@@ -77,7 +83,7 @@ export const DateField = ({
       <Controller
         control={control}
         name={schema._id}
-        rules={validationRules}
+        rules={disableRequiredValidation ? undefined : validationRules}
         defaultValue=""
         render={({ field: { value, onChange, ...field } }) => (
           <DatePicker

From 3b987598762dd4cf3fd81112fe4b8a9edf03af46 Mon Sep 17 00:00:00 2001
From: Kathleen Koh <kathleen@open.gov.sg>
Date: Wed, 3 Apr 2024 19:53:10 +0800
Subject: [PATCH 2/2] fix: removing console logs

---
 frontend/src/templates/Field/Date/DateField.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/templates/Field/Date/DateField.tsx b/frontend/src/templates/Field/Date/DateField.tsx
index ff9065ea11..2bd199d2bd 100644
--- a/frontend/src/templates/Field/Date/DateField.tsx
+++ b/frontend/src/templates/Field/Date/DateField.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
-import { useParams } from 'react-router-dom'
 
 import { DATE_DISPLAY_FORMAT, DATE_PARSE_FORMAT } from '~shared/constants/dates'
 import { FormColorTheme } from '~shared/types'
@@ -33,16 +32,11 @@ export const DateField = ({
   colorTheme = FormColorTheme.Blue,
   ...fieldContainerProps
 }: DateFieldProps): JSX.Element => {
-  console.log('disable validaton', disableRequiredValidation)
   const validationRules = useMemo(
     () => createDateValidationRules(schema, disableRequiredValidation),
     [schema, disableRequiredValidation],
   )
 
-  console.log('validation rules', validationRules)
-  const { submissionId } = useParams()
-  console.log('submission id', submissionId)
-
   const isDateUnavailable = useCallback(
     (date: Date) => {
       const { selectedDateValidation } = schema.dateValidation