fix: enable textarea autosize only on focus (#676)

Author: stevenle

.changeset/blue-frogs-bow.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+fix: enable textarea autosize only on focus (#676)

packages/root-cms/ui/components/DocEditor/fields/StringField.tsx

@@ -2,14 +2,12 @@ import {TextInput, Textarea} from '@mantine/core';
 import {ChangeEvent} from 'preact/compat';
 import {useEffect, useState} from 'preact/hooks';
 import * as schema from '../../../../core/schema.js';
-import {testHasExperimentParam} from '../../../utils/url-params.js';
 import {FieldProps} from './FieldProps.js';
 
-const DISABLE_AUTOSIZE = testHasExperimentParam('DisableTextareaAutosize');
-
 export function StringField(props: FieldProps) {
   const field = props.field as schema.StringField;
   const [value, setValue] = useState('');
+  const [autosize, setAutosize] = useState(false);
 
   function onChange(newValue: string) {
     setValue(newValue);
@@ -31,13 +29,18 @@ export function StringField(props: FieldProps) {
       <Textarea
         size="xs"
         radius={0}
-        autosize={!DISABLE_AUTOSIZE}
-        minRows={DISABLE_AUTOSIZE ? 4 : 2}
+        autosize={autosize}
+        minRows={3}
         maxRows={field.maxRows || 12}
         value={value}
         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
           onChange(e.currentTarget.value);
         }}
+        onFocus={() => {
+          if (!autosize) {
+            setAutosize(true);
+          }
+        }}
       />
     );
   }