feat: adds auto resize feature to textarea (#10786)

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](#10786 (comment)). --------- Co-authored-by: Germán Jabloñski <[email protected]>
payloadcms · Jan 29, 2025 · 7d429f8 · 7d429f8
1 parent 9638dbe
commit 7d429f8
Show file tree

Hide file tree

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