Repository: mlaursen/react-md
Pull request #121 (2016-06-21 13:20:20)

Fixed Props for TextField
Fixed the props for TextField that only style and className are applied to the surrouding div. The remaining
props are now applied to the input instead. This is to help with some of the missing props of name and id and all the
many events that can be attached to a text field.

Fixed a css bug where active was being colored when it should have been on focus.


Patch:
diff --git a/src/js/TextFields/TextField.js b/src/js/TextFields/TextField.js
index 5d2b179dba..af3181dcea 100644
--- a/src/js/TextFields/TextField.js
+++ b/src/js/TextFields/TextField.js
@@ -331,7 +331,9 @@ export default class TextField extends Component {
   render() {
     const { active, currentRows, areaHeight, passwordVisible } = this.state;
     const {
+      style,
       className,
+      inputStyle,
       inputClassName,
       label,
       placeholder,
@@ -346,26 +348,17 @@ export default class TextField extends Component {
       lineDirection,
       rows,
       maxRows,
-      inputStyle,
       disabled,
       required,
       helpOnFocus,
       block,
       fullWidth,
-      readOnly,
-      size,
-      onInput,
-      onInvalid,
-      onKeyDown,
-      onKeyPress,
-      onKeyUp,
-      onSelect,
-      onClick,
       type,
       ...props,
     } = this.props;
 
     delete props.defaultValue;
+    delete props.value;
     delete props.onBlur;
     delete props.onChange;
     delete props.onFocus;
@@ -425,6 +418,7 @@ export default class TextField extends Component {
     }
 
     const textFieldProps = {
+      ...props,
       className: classnames('md-text-field', inputClassName, {
         active,
         'floating-label': useFloatingLabel,
@@ -438,15 +432,6 @@ export default class TextField extends Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onFocus: this.handleFocus,
-      onClick,
-      onInput,
-      onInvalid,
-      onKeyDown,
-      onKeyPress,
-      onKeyUp,
-      onSelect,
-      readOnly,
-      size,
       value,
     };
 
@@ -489,7 +474,7 @@ export default class TextField extends Component {
         if(required && visiblePlaceholder.indexOf('*') === -1) {
           visiblePlaceholder = visiblePlaceholder.trim() + ' *';
         }
-      } else {
+      } else if(active || !!value) {
         visiblePlaceholder = placeholder;
       }
 
@@ -506,7 +491,7 @@ export default class TextField extends Component {
 
     return (
       <div
-        {...props}
+        style={style}
         className={classnames('md-text-field-container', className, {
           disabled,
           'multi-line': multiline,
diff --git a/src/scss/helpers/mixins/_text-fields.scss b/src/scss/helpers/mixins/_text-fields.scss
index b623cc5575..79904a4ece 100644
--- a/src/scss/helpers/mixins/_text-fields.scss
+++ b/src/scss/helpers/mixins/_text-fields.scss
@@ -223,7 +223,7 @@
   }
 
   .md-text-field-icon.active,
-  .md-floating-label.active:not(.error) {
+  .md-floating-label.focus:not(.error) {
     color: $color;
   }
 


Test patch:
diff --git a/src/js/TextFields/__tests__/TextField.js b/src/js/TextFields/__tests__/TextField.js
index dcdcf31a27..1163334db4 100644
--- a/src/js/TextFields/__tests__/TextField.js
+++ b/src/js/TextFields/__tests__/TextField.js
@@ -182,19 +182,27 @@ describe('TextField', () => {
     expect(input.getAttribute('placeholder')).toBe('Placeholder');
   });
 
-  it('allows both a placeholder and a label when floatingLabel is true', () => {
-    const textField = renderIntoDocument(
-      <TextField
-        label="Label"
-        placeholder="Placeholder"
-        floatingLabel={true}
-      />
-    );
+  it('displays both a placeholder and a label when floatingLabel is true and the text field has a value or focus', () => {
+    let props = {
+      label: 'Label',
+      placeholder: 'Placeholder',
+      floatingLabel: true,
+    };
 
-    const input = findRenderedDOMComponentWithTag(textField, 'input');
-    const label = findRenderedComponentWithType(textField, FloatingLabel);
-    expect(input.getAttribute('placeholder')).toBe('Placeholder');
-    expect(label.props.label).toBe('Label');
+    let textField = renderIntoDocument(<TextField {...props} />);
+    let label = findRenderedComponentWithType(textField, FloatingLabel);
+    let input = findRenderedDOMComponentWithTag(textField, 'input');
+    expect(label.props.label).toBe(props.label);
+    expect(input.getAttribute('placeholder')).toBe(null);
+
+    Simulate.focus(input);
+    expect(input.getAttribute('placeholder')).toBe(props.placeholder);
+
+    props = Object.assign({}, props, { value: 'Abcd' });
+    label = findRenderedComponentWithType(textField, FloatingLabel);
+    input = findRenderedDOMComponentWithTag(textField, 'input');
+    expect(label.props.label).toBe(props.label);
+    expect(input.getAttribute('placeholder')).toBe(props.placeholder);
   });
 
   it('renders the FloatingLabel component with correct props', () => {