fix: fix text area auto-expand when controlled (#912)

Author: gnapse

src/text-area/text-area.stories.mdx

@@ -1,5 +1,6 @@
 import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
 
+import { Box } from '../box'
 import { Stack } from '../stack'
 import { Text } from '../text'
 import { TextArea } from './'
@@ -182,20 +183,30 @@ Note that these variables are shared with other components such as `Textfield`,
 </Canvas>
 
 export function AutoExpandStory(props) {
+    const [value, setValue] = React.useState('')
     return (
-        <Stack space="xxlarge" dividers="secondary" maxWidth="medium">
+        <Stack space="large" dividers="secondary" maxWidth="medium">
             <TextArea
                 {...props}
-                label="What do you want to accomplish?"
-                message="Write as much or as little as you want. The input area will auto-expand to fit what you've typed."
+                label="Text area with auto-expand"
+                auxiliaryLabel="(controlled)"
                 autoExpand
+                value={value}
+                onChange={(event) => setValue(event.target.value)}
+                message="Write as much or as little as you want. The input area will auto-expand to fit what you've typed."
+                rows={1}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault()
+                        setValue('') // Clear the input programmatically
+                    }
+                }}
             />
-            <TextArea
-                {...props}
-                label="What do you want to accomplish?"
-                message="This one will not auto-expand."
-                autoExpand={false}
-            />
+            <Text size="caption" tone="secondary">
+                If you press Enter, the input will be cleared. This allows you to test that
+                auto-expand works when the input is cleared programmatically, shrinking the textarea
+                to the new expected height.
+            </Text>
         </Stack>
     )
 }
@@ -252,26 +263,12 @@ export function AutoExpandStory(props) {
 export function AutoExpandWithInitialValueStory(props) {
     const initialValue =
         'This is some text that takes up multiple lines. It should cause the textarea to render initially as large as needed to fit this text, even if its initial rows are not enough.'
-    const [value, setValue] = React.useState(initialValue)
     return (
         <Stack space="xxlarge" dividers="secondary" maxWidth="medium">
             <TextArea
                 {...props}
-                label="What do you want to accomplish?"
-                auxiliaryLabel={
-                    <Text tone="secondary" size="caption">
-                        {value.length}
-                    </Text>
-                }
-                message="Write as much or as little as you want. The input area will auto-expand to fit what you've typed."
-                value={value}
-                onChange={(event) => setValue(event.target.value)}
-                rows={1}
-                autoExpand
-            />
-            <TextArea
-                {...props}
-                label="What do you want to accomplish?"
+                label="Text area with auto-expand and initial value"
+                auxiliaryLabel="(uncontrolled)"
                 message="Write as much or as little as you want. The input area will auto-expand to fit what you've typed."
                 defaultValue={initialValue}
                 rows={1}

src/text-area/text-area.tsx

@@ -7,7 +7,18 @@ import styles from './text-area.module.css'
 
 interface TextAreaProps
     extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,
-        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {
+        Omit<
+            BaseFieldVariantProps,
+            'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'
+        > {
+    /**
+     * The value of the text area.
+     *
+     * If this prop is not specified, the text area will be uncontrolled and the component will
+     * manage its own state.
+     */
+    value?: string
+
     /**
      * The number of visible text lines for the text area.
      *
@@ -62,39 +73,13 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function T
     const internalRef = React.useRef<HTMLTextAreaElement>(null)
     const combinedRef = useMergeRefs([ref, internalRef])
 
+    useAutoExpand({ value, autoExpand, containerRef, internalRef })
+
     const textAreaClassName = classNames([
         autoExpand ? styles.disableResize : null,
         disableResize ? styles.disableResize : null,
     ])
 
-    React.useEffect(
-        function setupAutoExpand() {
-            const containerElement = containerRef.current
-
-            function handleAutoExpand(value: string) {
-                if (containerElement) {
-                    containerElement.dataset.replicatedValue = value
-                }
-            }
-
-            function handleInput(event: Event) {
-                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)
-            }
-
-            const textAreaElement = internalRef.current
-            if (!textAreaElement || !autoExpand) {
-                return undefined
-            }
-
-            // Apply change initially, in case the text area has a non-empty initial value
-            handleAutoExpand(textAreaElement.value)
-
-            textAreaElement.addEventListener('input', handleInput)
-            return () => textAreaElement.removeEventListener('input', handleInput)
-        },
-        [autoExpand],
-    )
-
     return (
         <BaseField
             variant={variant}
@@ -139,5 +124,60 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function T
     )
 })
 
+function useAutoExpand({
+    value,
+    autoExpand,
+    containerRef,
+    internalRef,
+}: {
+    value: string | undefined
+    autoExpand: boolean
+    containerRef: React.RefObject<HTMLDivElement>
+    internalRef: React.RefObject<HTMLTextAreaElement>
+}) {
+    const isControlled = value !== undefined
+
+    React.useEffect(
+        function setupAutoExpandWhenUncontrolled() {
+            const textAreaElement = internalRef.current
+            if (!textAreaElement || !autoExpand || isControlled) {
+                return undefined
+            }
+
+            const containerElement = containerRef.current
+
+            function handleAutoExpand(value: string) {
+                if (containerElement) {
+                    containerElement.dataset.replicatedValue = value
+                }
+            }
+
+            function handleInput(event: Event) {
+                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)
+            }
+
+            // Apply change initially, in case the text area has a non-empty initial value
+            handleAutoExpand(textAreaElement.value)
+            textAreaElement.addEventListener('input', handleInput)
+            return () => textAreaElement.removeEventListener('input', handleInput)
+        },
+        [autoExpand, containerRef, internalRef, isControlled],
+    )
+
+    React.useEffect(
+        function setupAutoExpandWhenControlled() {
+            if (!isControlled) {
+                return
+            }
+
+            const containerElement = containerRef.current
+            if (containerElement) {
+                containerElement.dataset.replicatedValue = value
+            }
+        },
+        [value, containerRef, isControlled],
+    )
+}
+
 export { TextArea }
 export type { TextAreaProps }