fixes #7495

ohcnetwork · May 6, 2024 · ba2aaf4 · ba2aaf4
1 parent 57cd550
commit ba2aaf4
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 36 deletions.
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -127,7 +127,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}
-            className="grow"
+            className="w-full grow"
+            innerClassName="pr-10"
             errorClassName="hidden"
             placeholder="Type your Note"
             disabled={!patientActive}

diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -208,36 +208,33 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             disableEdit={!patientActive}
           />
           <div className="relative mx-4 flex items-center">
-            <div className=" w-full px-12">
-              <AutoExpandingTextInputFormField
-                id="doctor_notes_textarea"
-                maxHeight={160}
-                rows={1}
-                name="note"
-                value={noteField}
-                onChange={(e) => setNoteField(e.value)}
-                className="grow"
-                errorClassName="hidden"
-                placeholder="Type your Note"
-                disabled={!patientActive}
-                onFocus={() => setFocused(true)}
-                onBlur={() => setFocused(false)}
-              />
-            </div>
-            <div className="flex items-center">
-              <ButtonV2
-                id="add_doctor_note_button"
-                onClick={onAddNote}
-                border={false}
-                className="absolute right-2"
-                ghost
-                size="small"
-                disabled={!patientActive}
-                authorizeFor={NonReadOnlyUsers}
-              >
-                <CareIcon icon="l-message" className="text-lg" />
-              </ButtonV2>
-            </div>
+            <AutoExpandingTextInputFormField
+              id="doctor_notes_textarea"
+              maxHeight={160}
+              rows={1}
+              name="note"
+              value={noteField}
+              onChange={(e) => setNoteField(e.value)}
+              className="w-full grow"
+              errorClassName="hidden"
+              innerClassName="pr-10"
+              placeholder="Type your Note"
+              disabled={!patientActive}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
+            />
+            <ButtonV2
+              id="add_doctor_note_button"
+              onClick={onAddNote}
+              border={false}
+              className="absolute right-2"
+              ghost
+              size="small"
+              disabled={!patientActive}
+              authorizeFor={NonReadOnlyUsers}
+            >
+              <CareIcon icon="l-message" className="text-lg" />
+            </ButtonV2>
           </div>
         </div>
       )}

diff --git a/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx b/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import TextAreaFormField, { TextAreaFormFieldProps } from "./TextAreaFormField";
 
 type AutoExpandingTextInputFormFieldProps = TextAreaFormFieldProps & {
@@ -9,6 +9,7 @@ const AutoExpandingTextInputFormField = (
   props: AutoExpandingTextInputFormFieldProps,
 ) => {
   const myref = useRef<HTMLTextAreaElement>(null);
+
   useEffect(() => {
     if (myref.current == null) return;
     const text = myref.current.textContent?.split("\n");
@@ -24,7 +25,7 @@ const AutoExpandingTextInputFormField = (
     myref.current.style.cssText = "height:" + height + "px";
   });
 
-  return <TextAreaFormField ref={myref} {...props} className="w-full" />;
+  return <TextAreaFormField ref={myref} {...props} />;
 };
 
 export default AutoExpandingTextInputFormField;
diff --git a/src/Components/Form/FormFields/TextAreaFormField.tsx b/src/Components/Form/FormFields/TextAreaFormField.tsx
@@ -1,13 +1,15 @@
 import { forwardRef } from "react";
 import FormField from "./FormField";
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
+import { classNames } from "../../../Utils/utils";
 
 export type TextAreaFormFieldProps = FormFieldBaseProps<string> & {
   placeholder?: string;
   value?: string | number;
   rows?: number;
   // prefixIcon?: React.ReactNode;
   // suffixIcon?: React.ReactNode;
+  innerClassName?: string;
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
 };
@@ -30,9 +32,11 @@ const TextAreaFormField = forwardRef(
           onChange={(e) => field.handleChange(e.target.value)}
           placeholder={props.placeholder}
           rows={rows}
-          className={`cui-input-base resize-none ${
-            field.error && "border-danger-500"
-          }`}
+          className={classNames(
+            "cui-input-base resize-none",
+            field.error && "border-danger-500",
+            props.innerClassName,
+          )}
           onFocus={props.onFocus}
           onBlur={props.onBlur}
         />