diff --git a/.changeset/chilled-seahorses-pay.md b/.changeset/chilled-seahorses-pay.md new file mode 100644 index 0000000000..b7ef6adb61 --- /dev/null +++ b/.changeset/chilled-seahorses-pay.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/text-area': patch +--- + +Allow defaultValue to be used in TextArea diff --git a/packages/text-area/src/TextArea/TextArea.spec.tsx b/packages/text-area/src/TextArea/TextArea.spec.tsx index 1013298af2..5495618877 100644 --- a/packages/text-area/src/TextArea/TextArea.spec.tsx +++ b/packages/text-area/src/TextArea/TextArea.spec.tsx @@ -62,6 +62,19 @@ describe('packages/text-area', () => { expect(onChange).toHaveBeenCalledTimes(1); }); + test('setting a defaultValue sets a default initial value and can be changed after', () => { + const { textArea } = renderTextArea({ + defaultValue: 'a fun default value', + }); + expect((textArea as HTMLTextAreaElement).value).toBe('a fun default value'); + + fireEvent.change(textArea, { + target: { value: 'a' }, + }); + + expect((textArea as HTMLTextAreaElement).value).toBe('a'); + }); + describe('when the "state" prop is set to error, and an "errorMessage" is set', () => { test('the error message appears in the DOM', () => { const { container } = renderTextArea({ diff --git a/packages/text-area/src/TextArea/TextArea.tsx b/packages/text-area/src/TextArea/TextArea.tsx index 5282afa382..e3ff3047e2 100644 --- a/packages/text-area/src/TextArea/TextArea.tsx +++ b/packages/text-area/src/TextArea/TextArea.tsx @@ -47,6 +47,7 @@ import { State, TextAreaProps } from './TextArea.types'; * @param props.darkMode Determines whether or not the component appears in dark theme. * @param props.handleValidation Validation callback used to validate input. * @param props.baseFontSize Override the global `baseFontSize` set in LeafygreenProvider. This will only change the font size of the input text, not the label or description. + * @param props.defaultValue The default value of the input field. Unlike value, component will not be controlled if defaultValue is passed. */ type TextArea = React.ForwardRefExoticComponent; @@ -69,6 +70,7 @@ export const TextArea: TextArea = forwardRef< handleValidation, 'aria-labelledby': ariaLabelledby, baseFontSize: baseFontSizeProp, + defaultValue = '', ...rest }: TextAreaProps, forwardedRef: React.Ref, @@ -78,7 +80,7 @@ export const TextArea: TextArea = forwardRef< const { darkMode, theme } = useDarkMode(darkModeProp); const isControlled = typeof controlledValue === 'string'; - const [uncontrolledValue, setValue] = useState(''); + const [uncontrolledValue, setValue] = useState(defaultValue); const value = isControlled ? controlledValue : uncontrolledValue; // Validation