fix textarea input ref

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>
+  );
+};

src/form/Textarea/Textarea.tsx

@@ -1,8 +1,8 @@
-import React, {
-  FC,
+import {
   forwardRef,
   RefObject,
   useImperativeHandle,
+  useLayoutEffect,
   useRef
 } from 'react';
 import TextareaAutosize, {
@@ -61,17 +61,15 @@ export interface TextAreaRef {
   focus?: () => void;
 }
 
-export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
-  TextAreaRef,
-  TextareaProps
->(
+export const Textarea = forwardRef<TextAreaRef, TextareaProps>(
   (
     {
       fullWidth,
       size = 'medium',
       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>