Ability to set form fields as invalid

[jamesmfriedman]

This is in reference to #60, there should be a way to set form fields as invalid.

[jamesmfriedman]

released in 1.1.0

[JetFault]

I can't seem to get this working 🤔 . Setting invalid={true} on the TextField doesn't set the mdc-text-field__invalid class.

[JetFault]

It seems to set it for the first render, but then MDC removes the class

[jamesmfriedman]

A few things on this:

• If you are passing invalid via className, it will add the class the first time
• If you have a controlled component (you're setting the value), it will continue to be applied every time react renders which would be on every keystroke
• If it is an uncontrolled component, MDC will do whatever it wants and RMWC can't really ensure that it sticks.

Does this sound like whats happening to you?

[JetFault]

I'm able to reproduce it on the TextField doc page, by just changing the first TextField to add invalid:

{/* Standard text field. */}
<TextField invalid={true} label="Write something..." />

{/* Help text can be added to appear on focus. Place it directly after TextField. */}
<TextFieldHelperText>Optional help text.</TextFieldHelperText>

You will see that it at first is red, then write something, click somewhere else (unfocus), click back. It now is no longer invalid

[jamesmfriedman]

Back to my original point, that is what is called an uncontrolled input. React doesn't re-render it after its first render. A more meaningful example.

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {/* This will lose its invalid state when you type. There is nothing to be done about that since material-web-components is removed the className and deciding what is valid or not based on the html5 pattern attribute. */}
        <TextField invalid label="Uncontrolled Input"/>

        {/* This will one wont because react will re-render it every time you type and reapply the invalid class */}
        <TextField invalid label="Controlled Input" value={this.state.myVal} onChange={evt => this.setState({value: evt.target.myVal})}/>
      </div>
    )
  }
}