From 7d429f8b6577b3a2e1c7f65a8ecc3dc0ce0cfa0d Mon Sep 17 00:00:00 2001
From: Amelia <44613453+LimChorngUan@users.noreply.github.com>
Date: Wed, 29 Jan 2025 22:40:39 +0100
Subject: [PATCH] feat: adds auto resize feature to textarea (#10786)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR introduces an auto resize feature for the `textarea` field.
By default Payload `textarea` field will dynamically [adjust its height
based on its
content](https://github.com/payloadcms/payload/pull/10786#discussion_r1928961885).

---------

Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>
---
 packages/ui/src/fields/Textarea/Input.tsx  | 24 +++----
 packages/ui/src/fields/Textarea/index.scss | 84 ++--------------------
 2 files changed, 16 insertions(+), 92 deletions(-)

diff --git a/packages/ui/src/fields/Textarea/Input.tsx b/packages/ui/src/fields/Textarea/Input.tsx
index 765aa76025a..c52180e4578 100644
--- a/packages/ui/src/fields/Textarea/Input.tsx
+++ b/packages/ui/src/fields/Textarea/Input.tsx
@@ -63,20 +63,16 @@ export const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
         />
         {BeforeInput}
         <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>
+          <textarea
+            data-rtl={rtl}
+            disabled={readOnly}
+            id={`field-${path.replace(/\./g, '__')}`}
+            name={path}
+            onChange={onChange}
+            placeholder={getTranslation(placeholder, i18n)}
+            rows={rows}
+            value={value || ''}
+          />
         </label>
         {AfterInput}
         <RenderCustomComponent
diff --git a/packages/ui/src/fields/Textarea/index.scss b/packages/ui/src/fields/Textarea/index.scss
index 879efbe8cc8..4130fd5286b 100644
--- a/packages/ui/src/fields/Textarea/index.scss
+++ b/packages/ui/src/fields/Textarea/index.scss
@@ -6,20 +6,14 @@
     display: flex;
     flex-direction: column;
 
-    .textarea-outer {
+    textarea {
       @include formInput();
-      display: flex;
+      field-sizing: content;
+      overflow-y: auto;
       resize: vertical;
       min-height: base(3);
       height: 100%;
-
-      // Scrollbar for giant content
-      max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
-      overflow: hidden;
-
-      @include mid-break {
-        max-height: 60vh;
-      }
+      display: flex;
     }
 
     &.read-only {
@@ -28,78 +22,12 @@
       }
     }
 
-    // This element takes exactly the same dimensions as the clone
-    .textarea-inner {
-      display: block;
-      position: relative;
-      line-height: inherit;
-      flex-grow: 1;
-      background: none;
-      outline: none;
-    }
-
-    // Unstyle the textarea, the border is rendered on .textarea-outer
-    .textarea-element {
-      position: relative;
-      z-index: 1;
-      width: 100%;
-      height: 100%;
-      border: inherit;
-      padding: inherit;
-      font: inherit;
-      line-height: inherit;
-      color: inherit;
-      background: none;
-      overflow: auto;
-      resize: none;
-      outline: none;
-      text-transform: inherit;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      &[data-rtl='true'] {
-        direction: rtl;
-      }
-    }
-
-    // Clone of textarea with same height
-    .textarea-clone {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      white-space: pre-wrap;
-      overflow-wrap: break-word;
-      visibility: hidden;
-      z-index: 0;
-      line-height: inherit;
-    }
-
-    .textarea-clone::before {
-      content: attr(data-value) ' ';
-      visibility: hidden;
-      opacity: 0;
-      white-space: pre-wrap;
-      overflow-wrap: break-word;
-    }
-
-    .textarea-clone::after {
-      content: attr(data-after);
-      opacity: 0.5;
-    }
-
-    @include mid-break {
-      padding: 0;
-    }
   }
 
   html[data-theme='light'] {
     .field-type.textarea {
       &.error {
-        .textarea-outer {
+        textarea {
           @include lightInputError;
         }
       }
@@ -109,7 +37,7 @@
   html[data-theme='dark'] {
     .field-type.textarea {
       &.error {
-        .textarea-outer {
+        textarea {
           @include darkInputError;
         }
       }