From 0f07886d982f22fc9a3b5b6dc984fdc203f57f66 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Fri, 15 Mar 2024 17:56:49 -0700
Subject: [PATCH 1/5] notes area auto resizing on enter, more text entered

---
 react-common/components/controls/Textarea.tsx |  9 +++++++
 .../src/components/DebouncedTextarea.tsx      | 25 ++++++++++++++++++-
 .../styling/EvalResultDisplay.module.scss     |  3 +--
 teachertool/src/style.overrides/Textarea.scss |  1 -
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/react-common/components/controls/Textarea.tsx b/react-common/components/controls/Textarea.tsx
index 311be961b9d9..cd23112e0cf4 100644
--- a/react-common/components/controls/Textarea.tsx
+++ b/react-common/components/controls/Textarea.tsx
@@ -14,6 +14,8 @@ export interface TextareaProps extends ControlProps {
     readOnly?: boolean;
     resize?: "both" | "horizontal" | "vertical";
     wrap?: "hard" | "soft" | "off";
+    autoResize?: boolean;
+    resizeRef?: React.RefObject<HTMLTextAreaElement>;
 
     onChange?: (newValue: string) => void;
     onEnterKey?: (value: string) => void;
@@ -38,6 +40,8 @@ export const Textarea = (props: TextareaProps) => {
         readOnly,
         resize,
         wrap,
+        autoResize,
+        resizeRef,
         onChange,
         onEnterKey
     } = props;
@@ -57,6 +61,10 @@ export const Textarea = (props: TextareaProps) => {
         if (onChange) {
             onChange(newValue);
         }
+        if (autoResize && resizeRef.current) {
+            resizeRef.current.style.height = "1px";
+            resizeRef.current.style.height = `${25 + resizeRef.current.scrollHeight}px`;
+        }
     }
 
     const enterKeyHandler = (e: React.KeyboardEvent) => {
@@ -90,6 +98,7 @@ export const Textarea = (props: TextareaProps) => {
                     minLength={minLength}
                     wrap={wrap}
                     readOnly={!!readOnly}
+                    ref={resizeRef}
                     onChange={changeHandler}
                     onKeyDown={enterKeyHandler}
                     autoComplete={autoComplete ? "" : "off"}
diff --git a/teachertool/src/components/DebouncedTextarea.tsx b/teachertool/src/components/DebouncedTextarea.tsx
index 4166b074af06..5e1d48795a4e 100644
--- a/teachertool/src/components/DebouncedTextarea.tsx
+++ b/teachertool/src/components/DebouncedTextarea.tsx
@@ -11,6 +11,8 @@ export interface DebouncedTextareaProps extends TextareaProps {
 export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs = 500, ...props }) => {
     const timerId = useRef<NodeJS.Timeout | undefined>(undefined);
     const latestValue = useRef<string>("");
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
     const sendChange = () => {
         if (props.onChange) {
@@ -21,11 +23,28 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
     // If the timer is pending and the component unmounts,
     // clear the timer and fire the onChange event immediately.
     useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            window.requestAnimationFrame(() => {
+                if (containerRef.current) {
+                    containerRef.current.style.height = "1px";
+                    containerRef.current.style.height = `${25 + containerRef.current.scrollHeight}px`;
+                }
+            });
+        });
+
+        if (textareaRef.current) {
+            resizeObserver.observe(textareaRef.current);
+        }
+
         return () => {
             if (timerId.current) {
                 clearTimeout(timerId.current);
                 sendChange();
             }
+
+            if (textareaRef.current) {
+                resizeObserver.unobserve(textareaRef.current);
+            }
         };
     }, []);
 
@@ -39,5 +58,9 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
         timerId.current = setTimeout(sendChange, intervalMs);
     };
 
-    return <Textarea {...props} onChange={onChangeDebounce} />;
+    return (
+        <div ref={containerRef}>
+            <Textarea {...props} autoResize={true} onChange={onChangeDebounce} resizeRef={textareaRef}/>
+        </div>
+    );
 };
diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
index 1605d67b9e80..77ac5597de53 100644
--- a/teachertool/src/components/styling/EvalResultDisplay.module.scss
+++ b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -12,7 +12,6 @@
     padding-bottom: 0.5rem;
     margin-top: 0.5rem;
     min-height: 9rem;
-    max-height: 12rem;
     border-bottom: solid 1px var(--pxt-content-accent) ;
 }
 
@@ -39,7 +38,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
index 623d1151c1e6..2e661a4a36f4 100644
--- a/teachertool/src/style.overrides/Textarea.scss
+++ b/teachertool/src/style.overrides/Textarea.scss
@@ -1,7 +1,6 @@
 .common-textarea-wrapper {
     div[class*="common-textarea-group"] {
         border-radius: 0.5rem;
-        height: 3.5rem;
         font-weight: 500;
         &:focus::after {
             outline: none;

From 6e6fe22a8ff34ae73e31b780ad1660288628d6e5 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 19 Mar 2024 14:32:50 -0700
Subject: [PATCH 2/5] do not need a resize observer in debouncedtextarea

---
 .../src/components/DebouncedTextarea.tsx      | 24 +------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/teachertool/src/components/DebouncedTextarea.tsx b/teachertool/src/components/DebouncedTextarea.tsx
index 5e1d48795a4e..c133a2365bea 100644
--- a/teachertool/src/components/DebouncedTextarea.tsx
+++ b/teachertool/src/components/DebouncedTextarea.tsx
@@ -12,7 +12,6 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
     const timerId = useRef<NodeJS.Timeout | undefined>(undefined);
     const latestValue = useRef<string>("");
     const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
 
     const sendChange = () => {
         if (props.onChange) {
@@ -23,28 +22,11 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
     // If the timer is pending and the component unmounts,
     // clear the timer and fire the onChange event immediately.
     useEffect(() => {
-        const resizeObserver = new ResizeObserver(() => {
-            window.requestAnimationFrame(() => {
-                if (containerRef.current) {
-                    containerRef.current.style.height = "1px";
-                    containerRef.current.style.height = `${25 + containerRef.current.scrollHeight}px`;
-                }
-            });
-        });
-
-        if (textareaRef.current) {
-            resizeObserver.observe(textareaRef.current);
-        }
-
         return () => {
             if (timerId.current) {
                 clearTimeout(timerId.current);
                 sendChange();
             }
-
-            if (textareaRef.current) {
-                resizeObserver.unobserve(textareaRef.current);
-            }
         };
     }, []);
 
@@ -58,9 +40,5 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
         timerId.current = setTimeout(sendChange, intervalMs);
     };
 
-    return (
-        <div ref={containerRef}>
-            <Textarea {...props} autoResize={true} onChange={onChangeDebounce} resizeRef={textareaRef}/>
-        </div>
-    );
+    return <Textarea {...props} autoResize={true} onChange={onChangeDebounce} resizeRef={textareaRef}/>
 };

From 0b8183f8cc258e4fde0f98d8d962347774f25e06 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 19 Mar 2024 14:47:43 -0700
Subject: [PATCH 3/5] remove ref as a prop, using use ref in textarea instead

---
 react-common/components/controls/Textarea.tsx    | 11 +++++------
 teachertool/src/components/DebouncedTextarea.tsx |  3 +--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/react-common/components/controls/Textarea.tsx b/react-common/components/controls/Textarea.tsx
index cd23112e0cf4..b83d216eb628 100644
--- a/react-common/components/controls/Textarea.tsx
+++ b/react-common/components/controls/Textarea.tsx
@@ -15,7 +15,6 @@ export interface TextareaProps extends ControlProps {
     resize?: "both" | "horizontal" | "vertical";
     wrap?: "hard" | "soft" | "off";
     autoResize?: boolean;
-    resizeRef?: React.RefObject<HTMLTextAreaElement>;
 
     onChange?: (newValue: string) => void;
     onEnterKey?: (value: string) => void;
@@ -41,12 +40,12 @@ export const Textarea = (props: TextareaProps) => {
         resize,
         wrap,
         autoResize,
-        resizeRef,
         onChange,
         onEnterKey
     } = props;
 
     const [value, setValue] = React.useState(initialValue || "");
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     React.useEffect(() => {
         setValue(initialValue)
@@ -61,9 +60,9 @@ export const Textarea = (props: TextareaProps) => {
         if (onChange) {
             onChange(newValue);
         }
-        if (autoResize && resizeRef.current) {
-            resizeRef.current.style.height = "1px";
-            resizeRef.current.style.height = `${25 + resizeRef.current.scrollHeight}px`;
+        if (autoResize && textareaRef.current) {
+            textareaRef.current.style.height = "1px";
+            textareaRef.current.style.height = `${25 +  textareaRef.current.scrollHeight}px`;
         }
     }
 
@@ -98,7 +97,7 @@ export const Textarea = (props: TextareaProps) => {
                     minLength={minLength}
                     wrap={wrap}
                     readOnly={!!readOnly}
-                    ref={resizeRef}
+                    ref={textareaRef}
                     onChange={changeHandler}
                     onKeyDown={enterKeyHandler}
                     autoComplete={autoComplete ? "" : "off"}
diff --git a/teachertool/src/components/DebouncedTextarea.tsx b/teachertool/src/components/DebouncedTextarea.tsx
index c133a2365bea..8d7837d82b9f 100644
--- a/teachertool/src/components/DebouncedTextarea.tsx
+++ b/teachertool/src/components/DebouncedTextarea.tsx
@@ -11,7 +11,6 @@ export interface DebouncedTextareaProps extends TextareaProps {
 export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs = 500, ...props }) => {
     const timerId = useRef<NodeJS.Timeout | undefined>(undefined);
     const latestValue = useRef<string>("");
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
 
     const sendChange = () => {
         if (props.onChange) {
@@ -40,5 +39,5 @@ export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({ intervalMs
         timerId.current = setTimeout(sendChange, intervalMs);
     };
 
-    return <Textarea {...props} autoResize={true} onChange={onChangeDebounce} resizeRef={textareaRef}/>
+    return <Textarea {...props} autoResize={true} onChange={onChangeDebounce} />
 };

From 84be19bcc0e70dc7ac1470bab2a287a794b068b1 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Tue, 19 Mar 2024 16:40:31 -0700
Subject: [PATCH 4/5] moved autoresize to criteriaresultsnotes, when
 initializing debouncedtextarea for notes

---
 teachertool/src/components/CriteriaResultEntry.tsx | 2 +-
 teachertool/src/components/DebouncedTextarea.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/teachertool/src/components/CriteriaResultEntry.tsx b/teachertool/src/components/CriteriaResultEntry.tsx
index f92dc1b51ee1..006b71c590d6 100644
--- 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("Notes")}
                 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
index 8d7837d82b9f..b564fb0a2d41 100644
--- 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} autoResize={true} onChange={onChangeDebounce} />
+    return <Textarea {...props} onChange={onChangeDebounce} />
 };

From 0f53e31240a6d5caa7c62f5171e47a0b3aa8a99d Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Wed, 20 Mar 2024 11:03:06 -0700
Subject: [PATCH 5/5] more accurate resizing, got rid of unneeded padding

---
 react-common/components/controls/Textarea.tsx | 2 +-
 teachertool/src/style.overrides/Textarea.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/react-common/components/controls/Textarea.tsx b/react-common/components/controls/Textarea.tsx
index b83d216eb628..32e2523ac38d 100644
--- a/react-common/components/controls/Textarea.tsx
+++ b/react-common/components/controls/Textarea.tsx
@@ -62,7 +62,7 @@ export const Textarea = (props: TextareaProps) => {
         }
         if (autoResize && textareaRef.current) {
             textareaRef.current.style.height = "1px";
-            textareaRef.current.style.height = `${25 +  textareaRef.current.scrollHeight}px`;
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
         }
     }
 
diff --git a/teachertool/src/style.overrides/Textarea.scss b/teachertool/src/style.overrides/Textarea.scss
index 737b5b480cc2..ce8ea9ad4a59 100644
--- a/teachertool/src/style.overrides/Textarea.scss
+++ b/teachertool/src/style.overrides/Textarea.scss
@@ -1,6 +1,7 @@
 .common-textarea-wrapper {
     div[class*="common-textarea-group"] {
         border-radius: 0.5rem;
+        min-height: 4.25rem;
         font-weight: 500;
         &:focus::after {
             outline: none;