From b3974e5f6c29b66f679e39b43883cf09b027505c Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Sat, 10 Aug 2024 19:33:54 -0500
Subject: [PATCH 1/2] fix textarea input ref

---
 src/form/Textarea/Textarea.story.tsx | 14 +++++++++++++-
 src/form/Textarea/Textarea.tsx       | 18 ++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/form/Textarea/Textarea.story.tsx b/src/form/Textarea/Textarea.story.tsx
index 8c3c39ef..0e7fa96a 100644
--- a/src/form/Textarea/Textarea.story.tsx
+++ b/src/form/Textarea/Textarea.story.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Stack } from '../../layout/Stack';
 import { Textarea } from './Textarea';
+import { Button } from '@/elements';
 
 export default {
   title: 'Components/Form/Textarea',
@@ -32,3 +33,14 @@ export const Sizes = () => (
     <Textarea value="Large" size="large" />
   </Stack>
 );
+
+export const OutsideFocus = () => {
+  const inputRef = useRef(null);
+
+  return (
+    <Stack direction="column">
+      <Button onClick={() => inputRef?.current.focus()}>Click to focus</Button>
+      <Textarea ref={inputRef} />
+    </Stack>
+  );
+};
diff --git a/src/form/Textarea/Textarea.tsx b/src/form/Textarea/Textarea.tsx
index a3e4c8a8..66e2bb2c 100644
--- a/src/form/Textarea/Textarea.tsx
+++ b/src/form/Textarea/Textarea.tsx
@@ -1,8 +1,8 @@
-import React, {
-  FC,
+import {
   forwardRef,
   RefObject,
   useImperativeHandle,
+  useLayoutEffect,
   useRef
 } from 'react';
 import TextareaAutosize, {
@@ -61,10 +61,7 @@ export interface TextAreaRef {
   focus?: () => void;
 }
 
-export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
-  TextAreaRef,
-  TextareaProps
->(
+export const Textarea = forwardRef<TextAreaRef, TextareaProps>(
   (
     {
       fullWidth,
@@ -72,6 +69,7 @@ export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
       containerClassName,
       className,
       error,
+      autoFocus,
       theme: customTheme,
       ...rest
     },
@@ -87,6 +85,13 @@ export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
       focus: () => inputRef.current?.focus()
     }));
 
+    useLayoutEffect(() => {
+      if (autoFocus) {
+        // Small timeout for page loading
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }
+    }, [autoFocus]);
+
     const theme: TextareaTheme = useComponentTheme('textarea', customTheme);
 
     return (
@@ -108,6 +113,7 @@ export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
             theme.sizes[size],
             className
           )}
+          autoFocus={autoFocus}
           {...rest}
         />
       </div>

From 08b7a343ee331a3d18a0415bbf3bd768c5dce5f0 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Sat, 10 Aug 2024 19:37:04 -0500
Subject: [PATCH 2/2] rename ref to inputRef to avoid breaking change

---
 src/form/Textarea/Textarea.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/form/Textarea/Textarea.tsx b/src/form/Textarea/Textarea.tsx
index 66e2bb2c..3440d4b6 100644
--- a/src/form/Textarea/Textarea.tsx
+++ b/src/form/Textarea/Textarea.tsx
@@ -73,22 +73,22 @@ export const Textarea = forwardRef<TextAreaRef, TextareaProps>(
       theme: customTheme,
       ...rest
     },
-    ref
+    inputRef
   ) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
-    useImperativeHandle(ref, () => ({
-      inputRef,
+    useImperativeHandle(inputRef, () => ({
+      textareaRef,
       containerRef,
-      blur: () => inputRef.current?.blur(),
-      focus: () => inputRef.current?.focus()
+      blur: () => textareaRef.current?.blur(),
+      focus: () => textareaRef.current?.focus()
     }));
 
     useLayoutEffect(() => {
       if (autoFocus) {
         // Small timeout for page loading
-        requestAnimationFrame(() => inputRef.current?.focus());
+        requestAnimationFrame(() => textareaRef.current?.focus());
       }
     }, [autoFocus]);
 
@@ -105,7 +105,7 @@ export const Textarea = forwardRef<TextAreaRef, TextareaProps>(
         ref={containerRef}
       >
         <TextareaAutosize
-          ref={inputRef}
+          ref={textareaRef}
           className={twMerge(
             theme.input,
             fullWidth && theme.fullWidth,