From 5e0727d88f2801c059d051a80d9ed25f124f6606 Mon Sep 17 00:00:00 2001
From: Kshitij Verma <101321276+kshitijv256@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:54:23 +0530
Subject: [PATCH] Added support for multi-line text input for Doctor Notes
 (#6977)

* Changed TextFormField to TextAreaFormField

* made doctor notes input size dynamic

* fixed max height of textareafield

* made max height variable

* replaced ids with ref

* removed id prop

* added required comments

* added required comments

* lineheight computed dynamically
---
 .../ConsultationDoctorNotes/index.tsx         |  8 +--
 .../Facility/PatientNotesSlideover.tsx        |  7 +--
 .../AutoExpandingTextInputFormField.tsx       | 30 +++++++++++
 .../Form/FormFields/TextAreaFormField.tsx     | 53 +++++++++++--------
 4 files changed, 71 insertions(+), 27 deletions(-)
 create mode 100644 src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx

diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
index 8e39ee04e4e..c17ee3fb2db 100644
--- a/src/Components/Facility/ConsultationDoctorNotes/index.tsx
+++ b/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,14 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
         />
 
         <div className="relative mx-4 flex items-center">
-          <TextFormField
+          <AutoExpandingTextInputFormField
+            id="doctor_consultation_notes"
+            maxHeight={160}
+            rows={1}
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}
             className="grow"
-            type="text"
             errorClassName="hidden"
             placeholder="Type your Note"
             disabled={!patientActive}
diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
index 5ecf30cfcdf..2e231576eb2 100644
--- a/src/Components/Facility/PatientNotesSlideover.tsx
+++ b/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,14 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             setReload={setReload}
           />
           <div className="relative mx-4 flex items-center">
-            <TextFormField
+            <AutoExpandingTextInputFormField
               id="doctor_notes_textarea"
+              maxHeight={160}
+              rows={1}
               name="note"
               value={noteField}
               onChange={(e) => setNoteField(e.value)}
               className="grow"
-              type="text"
               errorClassName="hidden"
               placeholder="Type your Note"
               disabled={!patientActive}
diff --git a/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx b/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx
new file mode 100644
index 00000000000..22707f133bc
--- /dev/null
+++ b/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from "react";
+import TextAreaFormField, { TextAreaFormFieldProps } from "./TextAreaFormField";
+
+type AutoExpandingTextInputFormFieldProps = TextAreaFormFieldProps & {
+  maxHeight?: number;
+};
+
+const AutoExpandingTextInputFormField = (
+  props: AutoExpandingTextInputFormFieldProps
+) => {
+  const myref = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (myref.current == null) return;
+    const text = myref.current.textContent?.split("\n");
+    const len = text?.length || 1;
+    // 46 is height of the textarea when there is only 1 line
+    // getting line height from window
+    const lineHeight =
+      window.getComputedStyle(myref.current).lineHeight.slice(0, -2) || "20";
+    // added 26 for padding (20+26 = 46)
+    const height =
+      Math.min(len * parseInt(lineHeight), (props.maxHeight || 160) - 26) + 26;
+    // 160 is the max height of the textarea if not specified
+    myref.current.style.cssText = "height:" + height + "px";
+  });
+
+  return <TextAreaFormField ref={myref} {...props} className="w-full" />;
+};
+
+export default AutoExpandingTextInputFormField;
diff --git a/src/Components/Form/FormFields/TextAreaFormField.tsx b/src/Components/Form/FormFields/TextAreaFormField.tsx
index 23a7d025938..5c23bfec764 100644
--- a/src/Components/Form/FormFields/TextAreaFormField.tsx
+++ b/src/Components/Form/FormFields/TextAreaFormField.tsx
@@ -1,33 +1,44 @@
+import { forwardRef } from "react";
 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) => {
-  const field = useFormFieldPropsResolver(props as any);
-  return (
-    <FormField field={field}>
-      <textarea
-        id={field.id}
-        disabled={field.disabled}
-        name={field.name}
-        value={field.value}
-        required={field.required}
-        onChange={(e) => field.handleChange(e.target.value)}
-        placeholder={props.placeholder}
-        rows={rows}
-        className={`cui-input-base resize-none ${
-          field.error && "border-danger-500"
-        }`}
-      />
-    </FormField>
-  );
-};
+const TextAreaFormField = forwardRef(
+  (
+    { rows = 3, ...props }: TextAreaFormFieldProps,
+    ref?: React.Ref<HTMLTextAreaElement>
+  ) => {
+    const field = useFormFieldPropsResolver(props as any);
+    return (
+      <FormField field={field}>
+        <textarea
+          id={field.id}
+          ref={ref}
+          disabled={field.disabled}
+          name={field.name}
+          value={field.value}
+          required={field.required}
+          onChange={(e) => field.handleChange(e.target.value)}
+          placeholder={props.placeholder}
+          rows={rows}
+          className={`cui-input-base resize-none ${
+            field.error && "border-danger-500"
+          }`}
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+        />
+      </FormField>
+    );
+  }
+);
 
 export default TextAreaFormField;