fix: Ensure TextArea autoExpand is acknowledged on its initial value

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# next
+
+-   [Fix] `TextArea` with `autoExpand={true}` applies it initially, acknowledging any initial value that the field may have.
+
 # v21.0.0
 
 -   [BREAKING] `TextField`'s `startIcon` property is now renamed `startSlot`.

src/text-area/text-area.stories.tsx

@@ -200,3 +200,40 @@ AutoExpandStory.argTypes = {
         'small',
     ),
 }
+
+export function AutoExpandWithInitialValueStory(props: PartialProps<typeof TextArea>) {
+    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?"
+                secondaryLabel="controlled"
+                auxiliaryLabel={
+                    <Text tone="secondary" size="caption">
+                        {value.length}
+                    </Text>
+                }
+                hint="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?"
+                secondaryLabel="with defaultValue"
+                hint="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}
+                autoExpand
+            />
+        </Stack>
+    )
+}
+
+AutoExpandWithInitialValueStory.argTypes = AutoExpandStory.argTypes

src/text-area/text-area.tsx

@@ -51,14 +51,25 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function T
     React.useEffect(
         function setupAutoExpand() {
             const containerElement = containerRef.current
-            function handleInput(event: Event) {
+
+            function handleAutoExpand(value: string) {
                 if (containerElement) {
-                    containerElement.dataset.replicatedValue = (event.currentTarget as HTMLTextAreaElement).value
+                    containerElement.dataset.replicatedValue = value
                 }
             }
 
+            function handleInput(event: Event) {
+                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)
+            }
+
             const textAreaElement = internalRef.current
-            if (!textAreaElement || !autoExpand) return undefined
+            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)
         },