feat: adds auto resize feature to textarea

payloadcms · Jan 27, 2025 · ddc525d · ddc525d
1 parent 344b231
commit ddc525d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"],