CODEWITHSUNDEEP
reactjslabelmaterial-ui
Zotov
Zotov

Reputation: 285

Material UI floating label

Did anyone find a solution for the material UI and React textfield not automatically floating label example. Thanks This is the component I am using it in, the key is passes via Redux from another component and the main data is coming from the localStorage. The result is the same in both Firefox and Chrome : 

class UpdateForm extends Component {
  state = {
    dataTask: ''
  };
  componentDidMount() {
    if (this.props.selectedTask !== null) {
      const selectedTaskData = JSON.parse(localStorage.getItem(this.props.selectedTask));
      this.setState({dataTask: selectedTaskData});
    }
  }
  render() {
    return (
      <div className="rootComponent">
        <form className="textFields">
          <div className="rowFieldsUpdate">
            <TextField className="fieldUpdate"
              data-testid="update-id"
              label="ID"
              value={this.state.dataTask.ID}
            />
            <TextField className="fieldUpdate"
              data-testid="update-Username"
              label="Username"
              value={this.state.dataTask.username}
            />
            <TextField className="fieldUpdate"
              data-testid="update-lastname"
              label="Last Name"
              value={this.state.dataTask.lastName}
            />
          </div>
          <div className="rowFieldsUpdateSecond">
            <TextField className="fieldUpdate"
              data-testid="update-firstname"
              label="First Name"
              value={this.state.dataTask.firstName}
            />
            <TextField className="fieldUpdate"
              data-testid="update-email"
              label="Email"
              value={this.state.dataTask.email}
            />
          </div>
          <UpdateDialogWindow />
        </form>
      </div>
    );
  };
};

const mapStateToProps = state => {
  return {
    selectedTask: state.updateStates.selectedTask
  };
};

Upvotes: 0

Views: 2622

Answers (1)

Lara
Lara

Reputation: 516

This might be a weird material-ui bug. There seems to be a bug where if the initial value of a TextField is set to undefined or null instead of an empty string (or some other string value), it results in this strange problem. You could try setting your initial state to the following instead: 

state = {
    dataTask: {
        ID: ''
        username: ''
        ... rest of your fields
    }
}

Upvotes: 3

Related Questions