made doctor notes input size dynamic

ohcnetwork · Jan 10, 2024 · 7e264f6 · 7e264f6
1 parent afafb0c
commit 7e264f6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -30,6 +30,18 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
   const [patientName, setPatientName] = useState("");
   const [focused, setFocused] = useState(false);
 
+  const textArea = document.getElementById("doctor_consultation_notes");
+  textArea?.addEventListener("keydown", autosize);
+  function autosize() {
+    setTimeout(function () {
+      if (textArea == null) return;
+      textArea.style.cssText =
+        "min-height:36px; height: 36px; overflow-y: hidden; height:" +
+        textArea.scrollHeight +
+        "px";
+    }, 0);
+  }
+
   const initialData: PatientNoteStateType = {
     notes: [],
     cPage: 1,
@@ -121,6 +133,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
         <div className="relative mx-4 flex items-center">
           <TextAreaFormField
+            id="doctor_consultation_notes"
+            rows={1}
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}

diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -26,6 +26,18 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
   const [reload, setReload] = useState(false);
   const [focused, setFocused] = useState(false);
 
+  const textArea = document.getElementById("doctor_notes_textarea");
+  textArea?.addEventListener("keydown", autosize);
+  function autosize() {
+    setTimeout(function () {
+      if (textArea == null) return;
+      textArea.style.cssText =
+        "min-height:36px; height: 36px; overflow-y: hidden; height:" +
+        textArea.scrollHeight +
+        "px";
+    }, 0);
+  }
+
   const initialData: PatientNoteStateType = {
     notes: [],
     cPage: 1,
@@ -171,6 +183,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
           <div className="relative mx-4 flex items-center">
             <TextAreaFormField
               id="doctor_notes_textarea"
+              rows={1}
               name="note"
               value={noteField}
               onChange={(e) => setNoteField(e.value)}