fix: Prevent a controlled TextArea from expanding when autoExpand is false (#947)

Author: frankieyan

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

@@ -22,10 +22,17 @@ export function preventDefault(event) {
     event.preventDefault()
 }
 
-export function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
+export function InteractivePropsStory({
+    label,
+    auxiliaryLabel,
+    value,
+    controlled: _controlled,
+    ...props
+}) {
     return (
         <TextArea
             {...props}
+            value={value}
             label={label}
             auxiliaryLabel={
                 auxiliaryLabel ? (
@@ -49,7 +56,15 @@ export function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
                 control: { type: 'text' },
                 defaultValue: 'User bio',
             },
-            value: { table: { disable: true } },
+            controlled: {
+                control: { type: 'boolean' },
+                defaultValue: false,
+            },
+            value: {
+                if: { arg: 'controlled', truthy: true },
+                control: { type: 'text' },
+                defaultValue: '',
+            },
             tone: {
                 options: ['neutral', 'success', 'error', 'loading'],
                 control: { type: 'inline-radio' },

src/text-area/text-area.test.tsx

@@ -248,6 +248,27 @@ describe('TextArea', () => {
         expect(screen.getByTestId('value')).toHaveTextContent('I love to travel around the world')
     })
 
+    it('sets a data-replicated-value attribute on a controlled field when autoExpand is true', () => {
+        render(
+            <TextArea
+                value="I am a Frontend Developer"
+                label="Tell us a bit about you"
+                autoExpand
+            />,
+        )
+        const textareaElement = screen.getByRole('textbox', { name: 'Tell us a bit about you' })
+        expect(textareaElement.parentElement).toHaveAttribute(
+            'data-replicated-value',
+            'I am a Frontend Developer',
+        )
+    })
+
+    it('does NOT set a data-replicated-value attribute on an uncontrolled field when autoExpand is false', () => {
+        render(<TextArea value="I am a Frontend Developer" label="Tell us a bit about you" />)
+        const textareaElement = screen.getByRole('textbox', { name: 'Tell us a bit about you' })
+        expect(textareaElement.parentElement).not.toHaveAttribute('data-replicated-value')
+    })
+
     describe('a11y', () => {
         it('renders with no a11y violations', async () => {
             const { container } = render(

src/text-area/text-area.tsx

@@ -166,7 +166,7 @@ function useAutoExpand({
 
     React.useEffect(
         function setupAutoExpandWhenControlled() {
-            if (!isControlled) {
+            if (!isControlled || !autoExpand) {
                 return
             }
 
@@ -175,7 +175,7 @@ function useAutoExpand({
                 containerElement.dataset.replicatedValue = value
             }
         },
-        [value, containerRef, isControlled],
+        [value, containerRef, isControlled, autoExpand],
     )
 }