diff --git a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx
index 6f9528e25b..ce787964ed 100644
--- a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx
+++ b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx
@@ -95,6 +95,22 @@ describe('when entering patient sex and birth demographics', () => {
expect(container.querySelector('span.value')?.innerHTML).toBe('');
});
+ it('should render age only when date of birth is valid', async () => {
+ const { container, getByText, getByLabelText } = render();
+ const dateOfBirth = getByLabelText('Date of birth');
+
+ expect(getByText('Current age')).toBeInTheDocument();
+ expect(container.querySelector('span.value')?.innerHTML).toBe('');
+
+ act(() => {
+ userEvent.clear(dateOfBirth);
+ userEvent.type(dateOfBirth, '12012012');
+ userEvent.tab();
+ });
+
+ expect(container.querySelector('span.value')?.innerHTML).toContain('years');
+ });
+
it('should enable Date of death when deceased is true', async () => {
const { getByLabelText, queryByLabelText } = render();
diff --git a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx
index 0763c26e28..16bb6c80d0 100644
--- a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx
+++ b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx
@@ -1,5 +1,5 @@
import { useMemo } from 'react';
-import { Controller, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
import { usePatientSexBirthCodedValues } from 'apps/patient/profile/sexBirth/usePatientSexBirthCodedValues';
import { DatePickerInput, validDateRule } from 'design-system/date';
import { SingleSelect } from 'design-system/select';
@@ -21,14 +21,14 @@ const ENTRY_FIELD_PLACEHOLDER = '';
type BasicPersonalDetailsProps = EntryFieldsProps;
export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: BasicPersonalDetailsProps) => {
- const { control } = useFormContext<{ personalDetails: BasicPersonalDetailsEntry }>();
+ const { control, formState, getFieldState } = useFormContext<{ personalDetails: BasicPersonalDetailsEntry }>();
const currentBirthday = useWatch({ control, name: 'personalDetails.bornOn' });
const selectedDeceased = useWatch({ control, name: 'personalDetails.deceased' });
const age = useMemo(() => displayAgeAsOfToday(currentBirthday), [currentBirthday]);
const sexBirthValues = usePatientSexBirthCodedValues();
const generalValues = usePatientGeneralCodedValues();
const { hivAccess } = usePatientProfilePermissions();
- const { isValid: bornOnValid } = useFormState({ control, name: 'personalDetails.bornOn' });
+ const { invalid: bornOnInvalid } = getFieldState('personalDetails.bornOn', formState);
return (