remove ref as a prop, using use ref in textarea instead

microsoft · Mar 19, 2024 · 0b8183f · 0b8183f
1 parent 6e6fe22
commit 0b8183f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git 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
@@ -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} />
 };