diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js index 32dc937b77f9..64c17e56c3bf 100644 --- a/packages/react/src/components/TextArea/TextArea-test.js +++ b/packages/react/src/components/TextArea/TextArea-test.js @@ -20,6 +20,7 @@ describe('TextArea', () => { labelText="testlabel" className="extra-class" helperText="testHelper" + defaultValue="default value" /> ); @@ -67,8 +68,7 @@ describe('TextArea', () => { }); it('should set defaultValue as expected', () => { - wrapper.setProps({ defaultValue: 'default value' }); - expect(textarea().props().defaultValue).toEqual('default value'); + expect(textarea().props().value).toEqual('default value'); }); it('should count length increases in textarea value', () => { diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js index d1e9f10933d8..ed5ee9807924 100644 --- a/packages/react/src/components/TextArea/TextArea.js +++ b/packages/react/src/components/TextArea/TextArea.js @@ -46,10 +46,11 @@ const TextArea = ({ light, charCount, maxLength, + defaultValue, renderCharCounter: CharCounter = DefaultCharCounter, ...other }) => { - const [textareaVal, setInput] = useState(''); + const [textareaVal, setInput] = useState(defaultValue); const textareaProps = { id, onChange: evt => { diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js index c5f9ffd93a79..eac44f7d3a6f 100644 --- a/packages/react/src/components/TextInput/TextInput-story.js +++ b/packages/react/src/components/TextInput/TextInput-story.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, { useState } from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { @@ -73,27 +73,18 @@ const props = { }), }; -class ControlledPasswordInputApp extends React.Component { - state = { - type: 'password', - }; - - togglePasswordVisibility = () => { - this.setState({ - type: this.state.type === 'password' ? 'text' : 'password', - }); - }; - - render() { - return ( - <TextInput.ControlledPasswordInput - type={this.state.type} - togglePasswordVisibility={this.togglePasswordVisibility} - {...props.passwordInput()} - /> - ); - } -} +const ControlledPasswordInputApp = () => { + const [inputType, setInputType] = useState('password'); + const togglePasswordVisibility = () => + setInputType(inputType === 'password' ? 'text' : 'password'); + return ( + <TextInput.ControlledPasswordInput + type={inputType} + togglePasswordVisibility={togglePasswordVisibility} + {...props.passwordInput()} + /> + ); +}; storiesOf('TextInput', module) .addDecorator(withKnobs) diff --git a/packages/react/src/components/TextInput/TextInput-test.js b/packages/react/src/components/TextInput/TextInput-test.js index 52d178c9b26f..e45bbd53b880 100644 --- a/packages/react/src/components/TextInput/TextInput-test.js +++ b/packages/react/src/components/TextInput/TextInput-test.js @@ -20,6 +20,7 @@ describe('TextInput', () => { className="extra-class" labelText="testlabel" helperText="testHelper" + defaultValue="test" light /> ); @@ -75,9 +76,7 @@ describe('TextInput', () => { }); it('should set value as expected', () => { - expect(textInput().props().defaultValue).toEqual(undefined); - wrapper.setProps({ defaultValue: 'test' }); - expect(textInput().props().defaultValue).toEqual('test'); + expect(textInput().props().value).toEqual('test'); }); it('should count length increases in text input value', () => { diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js index 46d0cb9f7119..78ece438ff7b 100644 --- a/packages/react/src/components/TextInput/TextInput.js +++ b/packages/react/src/components/TextInput/TextInput.js @@ -50,12 +50,13 @@ const TextInput = React.forwardRef(function TextInput( light, charCount, renderCharCounter: CharCounter = DefaultCharCounter, + defaultValue, maxLength, ...other }, ref ) { - const [inputVal, setInput] = useState(''); + const [inputVal, setInput] = useState(defaultValue); const errorId = id + '-error-msg'; const textInputClasses = classNames(`${prefix}--text-input`, className, { [`${prefix}--text-input--light`]: light,