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 AutoExpandingTextInputFormField from "../../Form/FormFields/AutoExpandingTextInputFormField.js";
 
 interface ConsultationDoctorNotesProps {
   patientId: string;
@@ -120,12 +120,13 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
         />
 
         <div className="relative mx-4 flex items-center">
-          <TextFormField
+          <AutoExpandingTextInputFormField
+            id="doctor_consultation_notes"
+            rows={1}
             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 AutoExpandingTextInputFormField from "../Form/FormFields/AutoExpandingTextInputFormField.js";
 
 interface PatientNotesProps {
   patientId: string;
@@ -169,13 +169,13 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             setReload={setReload}
           />
           <div className="relative mx-4 flex items-center">
-            <TextFormField
+            <AutoExpandingTextInputFormField
               id="doctor_notes_textarea"
+              rows={1}
               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/AutoExpandingTextInputFormField.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import TextAreaFormField, { TextAreaFormFieldProps } from "./TextAreaFormField";
+
+type AutoExpandingTextInputFormFieldProps = TextAreaFormFieldProps & {
+  id: string;
+};
+
+const AutoExpandingTextInputFormField = (
+  props: AutoExpandingTextInputFormFieldProps
+) => {
+  const textArea = document.getElementById(props.id);
+  useEffect(() => {
+    if (textArea == null) return;
+    const text = textArea.textContent?.split("\n");
+    const len = (text?.length == 0 ? 1 : text?.length) || 1;
+    if (len > 7) {
+      textArea.style.cssText =
+        "min-height:36px; max-height:160px; height:160px;";
+    } else {
+      const height = Math.min(len * 18, 132) + 28;
+      textArea.style.cssText =
+        "min-height:36px; max-height:160px; height:46px; height:" +
+        height +
+        "px";
+    }
+  }, [textArea?.textContent]);
+
+  return <TextAreaFormField {...props} className="max-h-40 w-full" />;
+};
+
+export default AutoExpandingTextInputFormField;

src/Components/Form/FormFields/TextAreaFormField.tsx

@@ -1,12 +1,14 @@
 import FormField from "./FormField";
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
 
-type TextAreaFormFieldProps = FormFieldBaseProps<string> & {
+export type TextAreaFormFieldProps = FormFieldBaseProps<string> & {
   placeholder?: string;
   value?: string | number;
   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>
   );