diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx index 007c0c0b4a2..eebe3582afe 100644 --- a/packages/@react-spectrum/textfield/src/TextArea.tsx +++ b/packages/@react-spectrum/textfield/src/TextArea.tsx @@ -11,7 +11,7 @@ */ import {chain} from '@react-aria/utils'; -import React, {RefObject, useRef} from 'react'; +import React, {RefObject, useCallback, useEffect, useRef} from 'react'; import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield'; import {TextFieldBase} from './TextFieldBase'; import {useProviderProps} from '@react-spectrum/provider'; @@ -30,13 +30,25 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject) { let inputRef = useRef(); - let onHeightChange = () => { + let onHeightChange = useCallback(() => { if (isQuiet) { let input = inputRef.current; input.style.height = 'auto'; input.style.height = `${input.scrollHeight}px`; } - }; + }, [isQuiet, inputRef]); + + useEffect(() => { + if (inputRef.current) { + // if no value or defaultValue is passed + // no need to call onHeightChange + if (!inputRef.current.value) { + return; + } + onHeightChange(); + } + }, [onHeightChange]); + let {labelProps, inputProps} = useTextField({ ...props, diff --git a/packages/@react-spectrum/textfield/stories/TextArea.stories.js b/packages/@react-spectrum/textfield/stories/TextArea.stories.js index 4d830dbf332..61991812e0b 100644 --- a/packages/@react-spectrum/textfield/stories/TextArea.stories.js +++ b/packages/@react-spectrum/textfield/stories/TextArea.stories.js @@ -34,6 +34,14 @@ storiesOf('TextArea', module) 'isQuiet: true', () => render({isQuiet: true}) ) + .add( + 'isQuiet, defaultValue', + () => render({isQuiet: true, defaultValue: 'foo '.repeat(10)}) + ) + .add( + 'isQuiet, value', + () => render({isQuiet: true, value: 'foo '.repeat(10)}) + ) .add( 'isDisabled: true', () => render({isDisabled: true}) diff --git a/packages/@react-spectrum/textfield/test/TextArea.test.js b/packages/@react-spectrum/textfield/test/TextArea.test.js index a2a44ca20ad..97151056c04 100644 --- a/packages/@react-spectrum/textfield/test/TextArea.test.js +++ b/packages/@react-spectrum/textfield/test/TextArea.test.js @@ -54,4 +54,15 @@ describe('TextArea', () => { fireEvent.change(input, {target: {value: '15', style: {}}}); expect(input.style.height).toBe(`${mockScrollHeight}px`); }); + + it.each` + Name | Component | props + ${'v3 TextArea (controlled)'} | ${TextArea} | ${{isQuiet: true, onChange, value: 'foo'}} + ${'v3 TextArea (uncontrolled)'} | ${TextArea} | ${{isQuiet: true, onChange, defaultValue: 'foo'}} + `('$Name quiet variant automatically adjusts its vertical height on mount', ({Component, props}) => { + let tree = renderComponent(Component, props); + let input = tree.getByTestId(testId); + + expect(input.style.height).toBe(`${mockScrollHeight}px`); + }); });