Merge pull request #3450 from theosherry/textFieldbug

[TextField] Fix defaultValue overlays floatingLabelText on mount

Author: mbrookes

src/TextField/TextField.jsx

@@ -306,6 +306,7 @@ const TextField = React.createClass({
       errorText: this.props.errorText,
       hasValue: isValid(props.value) || isValid(props.defaultValue) ||
         (props.valueLink && isValid(props.valueLink.value)),
+      isClean: true,
       muiTheme: this.context.muiTheme || getMuiTheme(),
     };
   },
@@ -348,7 +349,8 @@ const TextField = React.createClass({
     if (hasValueLinkProp) {
       newState.hasValue = isValid(nextProps.valueLink.value);
     } else if (hasValueProp) {
-      newState.hasValue = isValid(nextProps.value);
+      newState.hasValue = isValid(nextProps.value) ||
+        (this.state.isClean && isValid(nextProps.defaultValue));
     }
 
     if (newState) this.setState(newState);
@@ -377,7 +379,7 @@ const TextField = React.createClass({
   },
 
   _handleInputChange(event) {
-    this.setState({hasValue: isValid(event.target.value)});
+    this.setState({hasValue: isValid(event.target.value), isClean: false});
     if (this.props.onChange) this.props.onChange(event);
   },
 
@@ -457,7 +459,6 @@ const TextField = React.createClass({
       </TextFieldLabel>
     );
 
-
     const inputProps = {
       id: inputId,
       ref: (elem) => this.input = elem,

test/unit/TextField.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {assert} from 'chai';
+import TextField from 'src/TextField/TextField';
+import TextFieldLabel from 'src/TextField/TextFieldLabel';
+
+describe('<TextField />', () => {
+  it('shrinks TextFieldLabel when defaultValue is set and value is null', () => {
+    const wrapper = shallow(
+      <TextField
+        floatingLabelText="floating label text"
+        defaultValue="default value"
+        value={null}
+      />
+    );
+
+    assert.equal(wrapper.find(TextFieldLabel).props().shrink, true, 'should shrink TextFieldLabel');
+
+    // set a new prop to trigger componentWillReceiveProps
+    wrapper.setProps({id: '1'});
+    assert.equal(wrapper.find(TextFieldLabel).props().shrink, true, 'should shrink TextFieldLabel');
+  });
+
+  it(`unshrinks TextFieldLabel when defaultValue is set, the component has had input change,
+        and value is re-set to null`, () => {
+    const wrapper = shallow(
+      <TextField
+        floatingLabelText="floating label text"
+        defaultValue="default value"
+        value={null}
+      />
+      );
+    assert.equal(wrapper.find(TextFieldLabel).props().shrink, true, 'should shrink TextFieldLabel');
+
+    // make input change
+    const input = wrapper.find('input');
+    input.simulate('change', {target: {value: 'foo'}});
+    assert.equal(wrapper.find(TextFieldLabel).props().shrink, true, 'should shrink TextFieldLabel');
+
+    // set value to null again, which should unshrink the TextFieldLabel, even though TextField's isClean
+    // state propety is false.
+    wrapper.setProps({value: null});
+    assert.equal(wrapper.state().isClean, false);
+    assert.equal(wrapper.find(TextFieldLabel).props().shrink, false, 'should shrink TextFieldLabel');
+  });
+});