feat(component): Auto-Expand Text area to content height

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
nofusscomputing · Nov 13, 2024 · a8b86c6 · a8b86c6
1 parent 966645b
commit a8b86c6
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/components/form/Textarea.jsx b/src/components/form/Textarea.jsx
@@ -22,6 +22,22 @@ const TextArea = ({
                 required={required}
                 className="common-field"
                 onChange={onChange}
+                onKeyUp={(e) =>{
+
+                    const currentScrollY = window.scrollY
+
+                    e.target.style.height = "1px";
+                    e.target.style.height = ( 25 + e.target.scrollHeight ) + "px";
+
+                    window.scrollTo(0, currentScrollY);    // Prevent window scrolling to y=0
+
+                }}
+                onClick={(e) =>{
+
+                    e.target.style.height = "1px";
+                    e.target.style.height = ( 25 + e.target.scrollHeight ) + "px";
+
+                }}
 
             >{value}</textarea>
             <span className="error-text">{error_text}</span>