Teacher tool: notes area auto resizing on enter, more text entered (#…

…9920) * notes area auto resizing on enter, more text entered * do not need a resize observer in debouncedtextarea * remove ref as a prop, using use ref in textarea instead * moved autoresize to criteriaresultsnotes, when initializing debouncedtextarea for notes * more accurate resizing, got rid of unneeded padding
microsoft · Mar 20, 2024 · e62d76c · e62d76c
1 parent 21be101
commit e62d76c
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/react-common/components/controls/Textarea.tsx b/react-common/components/controls/Textarea.tsx
@@ -14,6 +14,7 @@ export interface TextareaProps extends ControlProps {
     readOnly?: boolean;
     resize?: "both" | "horizontal" | "vertical";
     wrap?: "hard" | "soft" | "off";
+    autoResize?: boolean;
 
     onChange?: (newValue: string) => void;
     onEnterKey?: (value: string) => void;
@@ -38,11 +39,13 @@ export const Textarea = (props: TextareaProps) => {
         readOnly,
         resize,
         wrap,
+        autoResize,
         onChange,
         onEnterKey
     } = props;
 
     const [value, setValue] = React.useState(initialValue || "");
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     React.useEffect(() => {
         setValue(initialValue)
@@ -57,6 +60,10 @@ export const Textarea = (props: TextareaProps) => {
         if (onChange) {
             onChange(newValue);
         }
+        if (autoResize && textareaRef.current) {
+            textareaRef.current.style.height = "1px";
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        }
     }
 
     const enterKeyHandler = (e: React.KeyboardEvent) => {
@@ -90,6 +97,7 @@ export const Textarea = (props: TextareaProps) => {
                     minLength={minLength}
                     wrap={wrap}
                     readOnly={!!readOnly}
+                    ref={textareaRef}
                     onChange={changeHandler}
                     onKeyDown={enterKeyHandler}
                     autoComplete={autoComplete ? "" : "off"}

diff --git a/teachertool/src/components/CriteriaResultEntry.tsx b/teachertool/src/components/CriteriaResultEntry.tsx
@@ -53,7 +53,7 @@ const CriteriaResultNotes: React.FC<CriteriaResultNotesProps> = ({ criteriaId, n
                 label={lf("Feedback")}
                 title={lf("Write your notes here")}
                 initialValue={teacherTool.evalResults[criteriaId]?.notes ?? undefined}
-                resize="vertical"
+                autoResize={true}
                 onChange={onTextChange}
                 autoComplete={false}
                 intervalMs={500}

diff --git a/teachertool/src/components/DebouncedTextarea.tsx b/teachertool/src/components/DebouncedTextarea.tsx
@@ -39,5 +39,5 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
         timerId.current = setTimeout(sendChange, intervalMs);
     };
 
-    return <Textarea {...props} onChange={onChangeDebounce} />;
+    return <Textarea {...props} onChange={onChangeDebounce} />
 };
diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -39,7 +39,7 @@
     align-items: center;
     justify-content: flex-end;
     width: 100%;
-    height: 5.5rem;
+    min-height: 5.5rem;
     margin-top: 0.25rem;
 
     .notes-container {

diff --git a/teachertool/src/style.overrides/Textarea.scss b/teachertool/src/style.overrides/Textarea.scss
@@ -1,7 +1,7 @@
 .common-textarea-wrapper {
     div[class*="common-textarea-group"] {
         border-radius: 0.5rem;
-        height: 3.5rem;
+        min-height: 4.25rem;
         font-weight: 500;
         &:focus::after {
             outline: none;