CODEWITHSUNDEEP
reactjsmaterial-design-lite
Lango
Lango

Reputation: 3005

Label doesn't float when dynamically setting Textfield value in Material Design Light and React

When I dynamically set the value (i.e. update the prop not via typing) then the label does not move out of the way.

My code is

  render: function() {
    // Removed some minor logic here that isn't related
    return(
      <div className={classes}>
        <div className={_mdlInputClassNames} ref="inputContainer">
          <input
            ref="input"
            type="text"
            id={this.props.id}
            className="mdl-textfield__input"
            data-upgraded
            name={this.props.name}
            value={this.props.value}
            onKeyDown={this.props.onKeyDown}
            onKeyUp={this.props.onKeyUp}
            onChange={this._onChange}
            onBlur={this.props.onBlur}
            autoComplete="off" />
          <label
            htmlFor={this.props.id}
            className="mdl-textfield__label" >
              {this.props.label}
          </label>
          <div className={msgClasses}>{msg}</div>
        </div>
      </div>
    );
  },


  componentDidUpdate: function() {
    // THIS DOESNT DO ANYTHING
    // var inputContainer = this.refs.inputContainer.getDOMNode();
    // componentHandler.upgradeElement(inputContainer, 'MaterialTextfield');
  },

From what I can find online, upgrading the element should work. But it doesn't do anything.

Looking at the DOM Element, it already has a is-upgraded class on it, but not the is-dirty class which is the one that seems to actually move the label.

Any help would be great

Upvotes: 2

Views: 788

Answers (1)

Arild Sandberg
Arild Sandberg

Reputation: 31

This works for me:

$("#inputId").val("thevalue").parent().addClass("is-dirty");

Upvotes: 3

Related Questions