From fa30035fc4597d6ce1e0ab84dece217143280833 Mon Sep 17 00:00:00 2001
From: Nethmi Rodrigo <34070216+NethmiRodrigo@users.noreply.github.com>
Date: Wed, 10 Jul 2024 19:13:10 +0530
Subject: [PATCH] (fix) Update onDateChange function (#334)

* (fix): Update date change function

* remove console log

* Update date picker onChange handler

* Upgrade frameworj and core

* (fix): update onChange in mocks
---
 src/components/inputs/date/date.component.tsx          | 9 +++++----
 src/components/inputs/unspecified/unspecified.test.tsx | 3 ++-
 src/form-engine.test.tsx                               | 3 ++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/inputs/date/date.component.tsx b/src/components/inputs/date/date.component.tsx
index ed5e86fe4..8c4a1219d 100644
--- a/src/components/inputs/date/date.component.tsx
+++ b/src/components/inputs/date/date.component.tsx
@@ -15,6 +15,7 @@ import TooltipFieldLabel from '../../tooltip-field-label/tooltip-field-label.com
 import styles from './date.scss';
 import { useFieldValidationResults } from '../../../hooks/useFieldValidationResults';
 import { OpenmrsDatePicker, formatDate, formatTime } from '@openmrs/esm-framework';
+import { type CalendarDate, getLocalTimeZone } from '@internationalized/date';
 
 const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, previousValue }) => {
   const { t } = useTranslation();
@@ -30,8 +31,8 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  const onDateChange = ([date]) => {
-    const refinedDate = date instanceof Date ? new Date(date.setHours(0, 0, 0, 0)) : new Date(date);
+  const onDateChange = (date: CalendarDate) => {
+    const refinedDate = date.toDate(getLocalTimeZone());
     setTimeIfPresent(refinedDate, time);
     setFieldValue(question.id, refinedDate);
     onChange(question.id, refinedDate, setErrors, setWarnings);
@@ -47,7 +48,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
 
   useEffect(() => {
     if (!isEmpty(previousValue)) {
-      const refinedDate = previousValue instanceof Date ? new Date(previousValue.setHours(0, 0, 0, 0)) : previousValue;
+      const refinedDate = new Date(previousValue.toString());
       onTimeChange(false, true);
       setFieldValue(question.id, refinedDate);
       onChange(question.id, refinedDate, setErrors, setWarnings);
@@ -98,7 +99,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
               <Layer>
                 <OpenmrsDatePicker
                   id={question.id}
-                  onChange={(date) => onDateChange([date])}
+                  onChange={onDateChange}
                   labelText={
                     <span className={styles.datePickerLabel}>
                       {question.isRequired ? (
diff --git a/src/components/inputs/unspecified/unspecified.test.tsx b/src/components/inputs/unspecified/unspecified.test.tsx
index 9d132b462..745fa20f1 100644
--- a/src/components/inputs/unspecified/unspecified.test.tsx
+++ b/src/components/inputs/unspecified/unspecified.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import dayjs from 'dayjs';
+import { parseDate } from '@internationalized/date';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Formik } from 'formik';
 import { type FormField, type EncounterContext, FormContext } from '../../..';
@@ -19,7 +20,7 @@ jest.mock('@openmrs/esm-framework', () => {
           <input
             id={id}
             value={value ? dayjs(value).format('DD/MM/YYYY') : undefined}
-            onChange={(evt) => onChange(dayjs(evt.target.value).toDate())}
+            onChange={(evt) => onChange(parseDate(dayjs(evt.target.value).format('YYYY-MM-DD')))}
           />
         </>
       );
diff --git a/src/form-engine.test.tsx b/src/form-engine.test.tsx
index 29e533f9e..01e20802d 100644
--- a/src/form-engine.test.tsx
+++ b/src/form-engine.test.tsx
@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
 import userEvent from '@testing-library/user-event';
 import { act, cleanup, render, screen, within, fireEvent, waitFor } from '@testing-library/react';
 import { restBaseUrl } from '@openmrs/esm-framework';
+import { parseDate } from '@internationalized/date';
 import { when } from 'jest-when';
 import * as api from '../src/api/api';
 import { assertFormHasAllFields, findMultiSelectInput, findSelectInput } from './utils/test-utils';
@@ -68,7 +69,7 @@ jest.mock('@openmrs/esm-framework', () => {
           <input
             id={id}
             value={value ? dayjs(value).format('DD/MM/YYYY') : undefined}
-            onChange={(evt) => onChange(dayjs(evt.target.value).toDate())}
+            onChange={(evt) => onChange(parseDate(dayjs(evt.target.value).format('YYYY-MM-DD')))}
           />
           {isInvalid && invalidText && <span>{invalidText}</span>}
         </>