Commit 38837d26 authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

[TextField] Fix label and value overlapping when uncontrolled

parent ee1a7667
......@@ -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 = {
......
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);
});
});
});
......@@ -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>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment