[TextField] Fix label and value overlapping when uncontrolled

src/TextField/TextField.js

@@ -13,7 +13,8 @@ class TextField extends Component {
   randomId = `text-input-${randAlphaNum(8)}`;
 
   state = {
-    focused: false
+    focused: false,
+    valueIfUncontrolled: ''
   };
 
   render() {
@@ -34,13 +35,15 @@ class TextField extends Component {
       ...otherProps
     } = this.props;
 
+    const { focused, valueIfUncontrolled } = this.state;
+
     const className = classNames(
       classes.root,
       {
         [classes.disabled]: disabled,
         [classes.error]: error,
         [classes.fullWidth]: fullWidth,
-        [classes.focused]: this.state.focused,
+        [classes.focused]: focused,
         [classes.underline]: !disableUnderline
       },
       classNameProp
@@ -54,7 +57,8 @@ class TextField extends Component {
       [classes.error]: error,
       [classes.labelUp]:
         (value !== '' && value !== null && value !== undefined) ||
-        this.state.focused ||
+        (value === undefined && valueIfUncontrolled !== '') ||
+        focused ||
         type === 'date' ||
         type === 'time'
     });
@@ -73,6 +77,7 @@ class TextField extends Component {
           disabled={disabled}
           id={id}
           onBlur={this.handleBlur}
+          onChange={this.handleChange}
           onFocus={this.handleFocus}
           placeholder={placeholder}
           readOnly={readOnly}
@@ -102,6 +107,18 @@ class TextField extends Component {
       this.props.onBlur(event);
     }
   };
+
+  handleChange = event => {
+    if (this.props.value === undefined) {
+      this.setState({
+        valueIfUncontrolled: event.target.value
+      });
+    }
+
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
+  };
 }
 
 TextField.propTypes = {

src/TextField/TextField.test.js

 import React from 'react';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
 
 import wrapToTest from '../utils/wrapToTest';
 
@@ -21,4 +21,38 @@ describe('<TextField />', () => {
       expect(label).toHaveAttribute('for', input.id);
     });
   });
+
+  describe('label prop', () => {
+    it('must be up when component is uncontrolled and a value is set', () => {
+      const labelUpClass = 'label-up-class';
+      const { getByLabelText, getByText } = render(
+        wrapToTest()(
+          <TextField classes={{ labelUp: labelUpClass }} label='Text field' />
+        )
+      );
+
+      const label = getByText(/Text field/);
+      const input = getByLabelText(/Text field/);
+
+      expect(label).not.toHaveClass(labelUpClass);
+      fireEvent.change(input, { target: { value: 'content' } });
+      expect(label).toHaveClass(labelUpClass);
+    });
+
+    it('must be up when input is focused', () => {
+      const labelUpClass = 'label-up-class';
+      const { getByLabelText, getByText } = render(
+        wrapToTest()(
+          <TextField classes={{ labelUp: labelUpClass }} label='Text field' />
+        )
+      );
+
+      const label = getByText(/Text field/);
+      const input = getByLabelText(/Text field/);
+
+      expect(label).not.toHaveClass(labelUpClass);
+      fireEvent.focus(input);
+      expect(label).toHaveClass(labelUpClass);
+    });
+  });
 });

src/TextField/demos/TextFieldProps.js

@@ -28,14 +28,14 @@ class TextFieldProps extends React.Component {
     return (
       <Fragment>
         <Row>
-          <Col sm={3}>
+          <Col sm>
             <TextField
               label='Prenom'
               value={prenomField}
               onChange={this.handleChange('prenomField')}
             />
           </Col>
-          <Col sm={3}>
+          <Col sm>
             <TextField
               label='Error'
               value={errorField}
@@ -43,7 +43,7 @@ class TextFieldProps extends React.Component {
               onChange={this.handleChange('errorField')}
             />
           </Col>
-          <Col sm={3}>
+          <Col sm>
             <TextField
               label='Disabled'
               disabled
@@ -51,7 +51,7 @@ class TextFieldProps extends React.Component {
               onChange={this.handleChange('disabledField')}
             />
           </Col>
-          <Col sm={3}>
+          <Col sm>
             <TextField
               label='Question ?'
               value={questionField}
@@ -59,6 +59,9 @@ class TextFieldProps extends React.Component {
               onChange={this.handleChange('questionField')}
             />
           </Col>
+          <Col sm>
+            <TextField label='Uncontrolled' />
+          </Col>
         </Row>
       </Fragment>
     );