(fix) O3-3979: Visit start date field not populating correctly when editing a visit

e2e/specs/edit-existing-visit.spec.ts

@@ -27,7 +27,12 @@ test('Edit an existing visit', async ({ page }) => {
 
   await test.step('Then I should see the `Edit Visit` form launch in the workspace', async () => {
     await expect(chartPage.page.getByText(/visit start date and time/i)).toBeVisible();
-    await expect(chartPage.page.getByPlaceholder(/dd\/mm\/yyyy/i)).toBeVisible();
+    const datePickerInput = chartPage.page.getByPlaceholder(/dd\/mm\/yyyy/i);
+    await expect(datePickerInput).toBeVisible();
+    const dateValue = await datePickerInput.inputValue();
+    expect(dateValue).not.toBe('');
+    expect(dateValue).toMatch(/^\d{2}\/\d{2}\/\d{4}$/);
+
     await expect(chartPage.page.getByPlaceholder(/hh\:mm/i)).toBeVisible();
     await expect(chartPage.page.getByRole('combobox', { name: /select a location/i })).toBeVisible();
     await expect(chartPage.page.getByRole('combobox', { name: /select a location/i })).toHaveValue('Outpatient Clinic');

packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import styles from './visit-form.scss';
-import { Controller, useFormContext } from 'react-hook-form';
-import { type VisitFormData } from './visit-form.resource';
-import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
 import classNames from 'classnames';
-import { useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
 import { type amPm } from '@openmrs/esm-patient-common-lib';
-import dayjs from 'dayjs';
+import { type VisitFormData } from './visit-form.resource';
+import styles from './visit-form.scss';
 
 interface VisitDateTimeFieldProps {
   visitDatetimeLabel: string;
@@ -47,17 +47,17 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
         <Controller
           name={dateFieldName}
           control={control}
-          render={({ field: { onBlur, onChange, value } }) => (
+          render={({ field: { onChange, value } }) => (
             <ResponsiveWrapper>
               <DatePicker
+                className={styles.datePicker}
                 dateFormat="d/m/Y"
                 datePickerType="single"
                 id={dateFieldName}
-                style={{ paddingBottom: '1rem' }}
                 minDate={minDateObj}
                 maxDate={maxDateObj}
                 onChange={([date]) => onChange(date)}
-                value={value}
+                value={value ? dayjs(value).format('DD/MM/YYYY') : null}
               >
                 <DatePickerInput
                   id={`${dateFieldName}Input`}

packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx

@@ -178,6 +178,7 @@ const StartVisitForm: React.FC<StartVisitFormProps> = ({
   const defaultValues = useMemo(() => {
     const visitStartDate = visitToEdit?.startDatetime ? new Date(visitToEdit?.startDatetime) : new Date();
     const visitStopDate = visitToEdit?.stopDatetime ? new Date(visitToEdit?.stopDatetime) : null;
+
     let defaultValues: Partial<VisitFormData> = {
       visitStartDate,
       visitStartTime: dayjs(visitStartDate).format('hh:mm'),
@@ -689,20 +690,20 @@ const StartVisitForm: React.FC<StartVisitFormProps> = ({
           )}
           <Stack gap={1} className={styles.container}>
             <VisitDateTimeField
-              visitDatetimeLabel={t('visitStartDatetime', 'Visit start date and time')}
               dateFieldName="visitStartDate"
+              maxDate={maxVisitStartDatetime}
               timeFieldName="visitStartTime"
               timeFormatFieldName="visitStartTimeFormat"
-              maxDate={maxVisitStartDatetime}
+              visitDatetimeLabel={t('visitStartDatetime', 'Visit start date and time')}
             />
 
             {displayVisitStopDateTimeFields && (
               <VisitDateTimeField
-                visitDatetimeLabel={t('visitStopDatetime', 'Visit stop date and time')}
                 dateFieldName="visitStopDate"
+                minDate={minVisitStopDatetime}
                 timeFieldName="visitStopTime"
                 timeFormatFieldName="visitStopTimeFormat"
-                minDate={minVisitStopDatetime}
+                visitDatetimeLabel={t('visitStopDatetime', 'Visit stop date and time')}
               />
             )}
 

packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss

@@ -122,3 +122,7 @@
 .bodyShort02 {
   @include type.type-style('body-compact-02');
 }
+
+.datePicker {
+  padding-bottom: layout.$spacing-05;
+}