Added support for multi-line text input for Doctor Notes

src/Components/Facility/ConsultationDoctorNotes/index.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import * as Notification from "../../../Utils/Notifications.js";
 import Page from "../../Common/components/Page";
-import TextFormField from "../../Form/FormFields/TextFormField";
 import ButtonV2 from "../../Common/components/ButtonV2";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { NonReadOnlyUsers } from "../../../Utils/AuthorizeFor";
@@ -13,6 +12,7 @@ import request from "../../../Utils/request/request.js";
 import useQuery from "../../../Utils/request/useQuery.js";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import { isAppleDevice } from "../../../Utils/utils.js";
+import TextAreaFormField from "../../Form/FormFields/TextAreaFormField.js";
 
 interface ConsultationDoctorNotesProps {
   patientId: string;
@@ -120,12 +120,11 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
         />
 
         <div className="relative mx-4 flex items-center">
-          <TextFormField
+          <TextAreaFormField
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}
             className="grow"
-            type="text"
             errorClassName="hidden"
             placeholder="Type your Note"
             disabled={!patientActive}

src/Components/Facility/PatientNotesSlideover.tsx

@@ -3,7 +3,6 @@ import * as Notification from "../../Utils/Notifications.js";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { classNames, isAppleDevice } from "../../Utils/utils";
-import TextFormField from "../Form/FormFields/TextFormField";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { make as Link } from "../Common/components/Link.bs";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
@@ -12,6 +11,7 @@ import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import { PatientNoteStateType } from "./models";
 import useKeyboardShortcut from "use-keyboard-shortcut";
+import TextAreaFormField from "../Form/FormFields/TextAreaFormField.js";
 
 interface PatientNotesProps {
   patientId: string;
@@ -169,13 +169,12 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             setReload={setReload}
           />
           <div className="relative mx-4 flex items-center">
-            <TextFormField
+            <TextAreaFormField
               id="doctor_notes_textarea"
               name="note"
               value={noteField}
               onChange={(e) => setNoteField(e.value)}
               className="grow"
-              type="text"
               errorClassName="hidden"
               placeholder="Type your Note"
               disabled={!patientActive}

src/Components/Form/FormFields/TextAreaFormField.tsx

@@ -7,6 +7,8 @@ type TextAreaFormFieldProps = FormFieldBaseProps<string> & {
   rows?: number;
   // prefixIcon?: React.ReactNode;
   // suffixIcon?: React.ReactNode;
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
 };
 
 const TextAreaFormField = ({ rows = 3, ...props }: TextAreaFormFieldProps) => {
@@ -25,6 +27,8 @@ const TextAreaFormField = ({ rows = 3, ...props }: TextAreaFormFieldProps) => {
         className={`cui-input-base resize-none ${
           field.error && "border-danger-500"
         }`}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
       />
     </FormField>
   );