fix: pass defaultValue in to textarea and text input initial state (c…

…arbon-design-system#3015)
emyarod · Jun 18, 2019 · a0104a8 · a0104a8
1 parent 597ab82
commit a0104a8
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,