[TextField] value overlays floatingLabelText

[shotolab]

Problem Description

I am able to get the value of a TextField to overlay the floatingLabelText. I dug into it, and it looks like all the proper events are firing and the proper value for the css transition property is being passed into the html input field, where at that point React takes over. Nevertheless, I am not sure if this is a Material-UI issue, a React issue, or a Chrome issue.

I have created an example that mimics what my application is doing. I can only get this to happen when I use Redux. You will see in my example that I have a setTimeout in componentDidMount. Adding this, causes the display issue to occur. In my contrived example, removing this, or increasing the time significantly will cause the issue to not occur. In my actual application, I do not have a setTimeout like this.

All I can deduce at this point is that the usage of Redux (and perhaps other Fluxish tools) do something to mess with the timing of when React gets its state updates and in this case can't keep up?

I can only reproduce this in the Chrome version listed below. It is not an issue in FF 44.0. Others have reported problems in Chrome with autofill. This issue sounds similar, but the process to get it to occur does not involve autofill. If it is something to do with async and timing, then maybe they are related?

• https://bugs.chromium.org/p/chromium/issues/detail?id=352527
• md-input-container: Password label not floating with Chrome password-manager auto-fill angular/material#1376

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.7
• React-DOM: 0.14.7
• redux: 3.3.1
• redux-thunk: 1.0.3
• react-redux: 4.4.0
• Browser: Chrome 49.0.2623.87 (64-bit)

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import TextField from 'material-ui/lib/text-field';
import Card from 'material-ui/lib/card/card';
import CardText from 'material-ui/lib/card/card-text';
import Paper from 'material-ui/lib/paper';

const fetchFoo = () => {
  return (dispatch, getState) => {
    return dispatch({
      type: 'RECEIVE_FOO',
      foo: {
        bar: 'foo'
      }
    });
  }
}

const Input = React.createClass({
  render: function () {
    return (
      <TextField
        floatingLabelText='Equipment Name'
        value={this.props.value}
      />
    );
  }
});

const ParentComponent = React.createClass({
  propTypes: {
    fetchFoo: React.PropTypes.func.isRequired,
    foo: React.PropTypes.object
  },
  componentDidMount: function () {
    setTimeout(() => {
      this.props.fetchFoo();
    }, 0);
  },
  render: function () {
    return (
      <Card>
        <CardText>
          <Paper>
            <Input value={this.props.foo ? this.props.foo.bar : ''} />
          </Paper>
        </CardText>
      </Card>
    );
  }
});

const mapStateToProps = (state) => {
  return {
    foo: state.fooReducer.foo
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    fetchFoo: () => {
      dispatch(fetchFoo());
    }
  }
};

const reducers = combineReducers({
  fooReducer: (state = {}, action) => {
    switch (action.type) {
      case 'RECEIVE_FOO':
        return Object.assign({}, state, {
          foo: action.foo
        });
      default:
        return state;
    }
  }
});
let store = applyMiddleware(thunk)(createStore)(reducers);
const ParentComponentContainer = connect(mapStateToProps, mapDispatchToProps)(ParentComponent);

ReactDOM.render(<Provider store={store}><ParentComponentContainer /></Provider>, document.getElementById('ReactApp'));

[mbrookes]

Thanks for the detailed report. Could you test your example with 0.15.0-alpha.2 and let us know if it still occurs? Not suggesting that it's been fixed, just that a lot has changed since 0.14.4!)

[shotolab]

I can reproduce it in 0.15.0-alpha.2

[shotolab]

It looks like this issue is a problem with animations in general. I also ran across this with checkboxes.

Here are cases where the animation did not complete:

This is what it should look like:

[jayalfredprufrock]

I'm experiencing the same issue with hintText instead of floatingLabelText using 0.150-alpha2 and altjs. Will post back if I discover anything useful.

[genyded]

+1 with a screen shot on hintText and labels. I also see this in the other areas mentioned using the latest version:

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.

[rwlaschin]

Has this been fixed? I'm using material-ui@1.0.0-beta.17 and still seeing this issue with text boxes. The example above is very close to what I'm doing.

[oliviertassinari]

@rwlaschin Do you have a reproduction?

[kylane]

+1 with @genyded - having long hintText wrapping and overlapping the floating label.

[ericf89]

I set up a create-react-app with a basic repro of the issue: https://github.com/ericf89/material-ui-label-bug
yarn && yarn start and you should see something like this:

When we want something like this:

😄

I actually found a work around while setting this up, and maybe a possible pointer to the real issue?

Here's the example component:
https://github.com/ericf89/material-ui-label-bug/blob/50352c65dae79697a3999486791f3cbcba544b06/src/App.js#L7-L28

Notice that the text fields initial value is undefined, since I initialize an empty state... I notice that this bug does NOT occur if I initialize the component with state = { text: '' }, so maybe the initial value prop being undefined is somehow related . 🤔

[oliviertassinari]

@ericf89 Thanks for the feedback! Here is the warning you have if using a native input:

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
in input (at App.js:16)
in App (at index.js:7)

I'm gonna try to improve the warning system on Material-UI side.

[oliviertassinari]

Well, there is no warning with a textarea. I'm gonna fix the issue then :).

[mrsaleh]

I know that this may sounds strange ,but I had the same problem and initializing value of select component with an empty string instead of an undefined or null , solved the problem.
As I noticed , at the https://github.com/ericf89/material-ui-label-bug/blob/50352c65dae79697a3999486791f3cbcba544b06/src/App.js#L7-L28 example , you need to initialize text property of state with an empty string.

[mark-zacharias]

Should this issue be reopened? I'm still experiencing it using 1.4.2
As @mrsaleh mentioned making sure to initialize the incoming value get's around it but I don't think you should have to.