[TextField] value overlays floatingLabelText

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
• https://github.com/angular/material/issues/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'));

[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]

Well, there is no warning with a textarea. I’m gonna fix the issue then 😃.