tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

[Textfield] .is-dirty is lost on setState #411

Open gavmor opened 7 years ago

gavmor commented 7 years ago

We have a simple class:

export default class FooRecord extends React.Component {
  constructor() {
    super();
    this.state = {isPendent: false};
  }

  persistField = event => {
    this.setState({isPendent: true});
    setTimeout(()=>{ this.setState({isPendent: false}); }, 3000);
  }

  render() {
    return (
      <Textfield onBlur={this.persistField}
        className={this.state.isPendent && 'isPendent'}
        label="Address" />
    )
  }
}

If 'is-dirty' is stored in the DOM, render clobbers it. After blurring, labels reappear to collide with input text. It appears that updateClasses_ isn't firing after render? It only fires on input event, according to material-design-lite/src/textfield/textfield.js:

this.input_.addEventListener('input', this.boundUpdateClassesHandler);