(fix) fix ohri-unspecified issue

src/components/inputs/text/ohri-text.component.tsx

@@ -54,7 +54,7 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
   };
 
   useEffect(() => {
-    getConceptNameAndUUID(question.questionOptions.concept).then(conceptTooltip => {
+    getConceptNameAndUUID(question.questionOptions.concept).then((conceptTooltip) => {
       setConceptName(conceptTooltip);
     });
   }, [conceptName]);
@@ -91,7 +91,7 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
               invalidText={errors.length && errors[0].message}
               warn={warnings.length > 0}
               warnText={warnings.length && warnings[0].message}
-              onInvalid={e => e.preventDefault()}
+              onInvalid={(e) => e.preventDefault()}
               maxLength={question.questionOptions.max || TextInput.maxLength}
             />
           </div>

src/components/inputs/unspecified/ohri-unspecified.component.tsx

@@ -9,7 +9,7 @@ import styles from './ohri-unspecified.scss';
 
 export const OHRIUnspecified: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler }) => {
   const [field, meta] = useField(`${question.id}-unspecified`);
-  const { setFieldValue, encounterContext } = React.useContext(OHRIFormContext);
+  const { setFieldValue, encounterContext, fields } = React.useContext(OHRIFormContext);
   const [previouslyUnspecified, setPreviouslyUnspecified] = useState(false);
   const hideCheckBox = encounterContext.sessionMode == 'view';
   const [errors, setErrors] = useState([]);
@@ -54,11 +54,14 @@ export const OHRIUnspecified: React.FC<OHRIFormFieldProps> = ({ question, onChan
     }
   }, [question.value]);
 
-  const handleOnChange = useCallback(value => {
-    setFieldValue(`${question.id}-unspecified`, value.target.checked);
-    onChange(question.id, field.value, setErrors, setWarnings);
-    question.value = handler?.handleFieldSubmission(question, field.value, encounterContext);
-  }, []);
+  const handleOnChange = useCallback(
+    (value) => {
+      setFieldValue(`${question.id}-unspecified`, value.target.checked);
+      onChange(question.id, field.value, setErrors, setWarnings);
+      question.value = handler?.handleFieldSubmission(question, field.value, encounterContext);
+    },
+    [fields],
+  );
 
   return (
     !question.isHidden &&

src/components/inputs/unspecified/ohri-unspecified.test.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import { OHRIFormField, EncounterContext, OHRIFormContext } from '../../..';
 import { ObsSubmissionHandler } from '../../../submission-handlers/base-handlers';
 import { OHRIUnspecified } from './ohri-unspecified.component';
+import { findTextOrDateInput } from '../../../utils/test-utils';
+import OHRIDate from '../date/ohri-date.component';
 
 const question: OHRIFormField = {
   label: 'Visit Date',
@@ -28,13 +30,13 @@ const encounterContext: EncounterContext = {
   },
   sessionMode: 'enter',
   encounterDate: new Date(2020, 11, 29),
-  setEncounterDate: value => {},
+  setEncounterDate: (value) => {},
 };
 
-const renderForm = intialValues => {
+const renderForm = (intialValues) => {
   render(
     <Formik initialValues={intialValues} onSubmit={null}>
-      {props => (
+      {(props) => (
         <Form>
           <OHRIFormContext.Provider
             value={{
@@ -47,8 +49,9 @@ const renderForm = intialValues => {
               fields: [question],
               isFieldInitializationComplete: true,
               isSubmitting: false,
-              formFieldHandlers: { 'obs': ObsSubmissionHandler }
+              formFieldHandlers: { obs: ObsSubmissionHandler },
             }}>
+            <OHRIDate question={question} onChange={jest.fn()} handler={ObsSubmissionHandler} />
             <OHRIUnspecified question={question} onChange={jest.fn()} handler={ObsSubmissionHandler} />
           </OHRIFormContext.Provider>
         </Form>
@@ -74,4 +77,24 @@ describe('Unspecified', () => {
     fireEvent.click(unspecifiedCheckbox);
     expect(unspecifiedCheckbox).not.toBeChecked();
   });
+
+  it('Should clear field value when the "Unspecified" checkbox is clicked', async () => {
+    //setup
+    await renderForm({});
+    const unspecifiedCheckbox = screen.getByRole('checkbox', { name: /Unspecified/ });
+    const visitDateField = await findTextOrDateInput(screen, 'Visit Date');
+
+    // assert initial state
+    expect(unspecifiedCheckbox).not.toBeChecked();
+    expect((await visitDateField).value).toBe('');
+
+    //Assert date change
+    fireEvent.blur(visitDateField, { target: { value: '2023-09-09T00:00:00.000Z' } });
+    expect(visitDateField.value).toBe('09/09/2023');
+
+    // assert checked
+    fireEvent.click(unspecifiedCheckbox);
+    expect(unspecifiedCheckbox).toBeChecked();
+    expect(visitDateField.value).toBe('');
+  });
 });