From ddc525d149082c25fd85d1dde16fc1e2a8605df5 Mon Sep 17 00:00:00 2001
From: Amelia Lim <limchornguan418@gmail.com>
Date: Fri, 24 Jan 2025 15:20:49 +0100
Subject: [PATCH] feat: adds auto resize feature to textarea

---
 packages/ui/src/fields/Textarea/Input.tsx  | 24 ++++++++++++----------
 packages/ui/src/fields/Textarea/index.scss | 22 ++++++++++++++++++++
 packages/ui/src/fields/Textarea/types.ts   |  1 +
 test/_community/collections/Posts/index.ts |  4 ++++
 tsconfig.base.json                         |  2 +-
 5 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/fields/Textarea/Input.tsx b/packages/ui/src/fields/Textarea/Input.tsx
index 765aa76025a..ea28b56f2a8 100644
--- a/packages/ui/src/fields/Textarea/Input.tsx
+++ b/packages/ui/src/fields/Textarea/Input.tsx
@@ -65,17 +65,19 @@ export const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
         <label className="textarea-outer" htmlFor={`field-${path.replace(/\./g, '__')}`}>
           <div className="textarea-inner">
             <div className="textarea-clone" data-value={value || placeholder || ''} />
-            <textarea
-              className="textarea-element"
-              data-rtl={rtl}
-              disabled={readOnly}
-              id={`field-${path.replace(/\./g, '__')}`}
-              name={path}
-              onChange={onChange}
-              placeholder={getTranslation(placeholder, i18n)}
-              rows={rows}
-              value={value || ''}
-            />
+            <div className="textarea-grow-wrap" data-value={value || placeholder || ''}>
+              <textarea
+                className="textarea-element"
+                data-rtl={rtl}
+                disabled={readOnly}
+                id={`field-${path.replace(/\./g, '__')}`}
+                name={path}
+                onChange={onChange}
+                placeholder={getTranslation(placeholder, i18n)}
+                rows={rows}
+                value={value || ''}
+              />
+            </div>
           </div>
         </label>
         {AfterInput}
diff --git a/packages/ui/src/fields/Textarea/index.scss b/packages/ui/src/fields/Textarea/index.scss
index 879efbe8cc8..56d0c987fb8 100644
--- a/packages/ui/src/fields/Textarea/index.scss
+++ b/packages/ui/src/fields/Textarea/index.scss
@@ -94,6 +94,28 @@
     @include mid-break {
       padding: 0;
     }
+
+    // For auto resize
+    // Once the textarea is resized manually by the browser default drag handler, the auto resize is not working anymore
+    .textarea-grow-wrap {
+      display: grid;
+
+      &::after {
+        content: attr(data-value) ' ';
+        white-space: pre-wrap;
+        visibility: hidden;
+      }
+
+      & > textarea {
+        overflow: hidden;
+      }
+
+      & > textarea,
+      &::after {
+        font: inherit;
+        grid-area: 1 / 1 / 2 / 2;
+      }
+    }
   }
 
   html[data-theme='light'] {
diff --git a/packages/ui/src/fields/Textarea/types.ts b/packages/ui/src/fields/Textarea/types.ts
index e53c92a7ba9..b68abf363e2 100644
--- a/packages/ui/src/fields/Textarea/types.ts
+++ b/packages/ui/src/fields/Textarea/types.ts
@@ -5,6 +5,7 @@ import { type ChangeEvent } from 'react'
 
 export type TextAreaInputProps = {
   readonly AfterInput?: React.ReactNode
+  readonly autoResize?: boolean
   readonly BeforeInput?: React.ReactNode
   readonly className?: string
   readonly Description?: React.ReactNode
diff --git a/test/_community/collections/Posts/index.ts b/test/_community/collections/Posts/index.ts
index b38b83d0284..41ffd2e79b7 100644
--- a/test/_community/collections/Posts/index.ts
+++ b/test/_community/collections/Posts/index.ts
@@ -14,6 +14,10 @@ export const PostsCollection: CollectionConfig = {
       name: 'title',
       type: 'text',
     },
+    {
+      name: 'comment',
+      type: 'textarea',
+    },
     {
       name: 'content',
       type: 'richText',
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c461af5dcb3..ffd7ec771c4 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/admin/config.ts"],
+      "@payload-config": ["./test/_community/config.ts"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
       "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],