Rmwc: Controlled TextField with required enabled initially renders invalid

[rjdestigter]

Package Versions

react: ^16.4.2
rmwc: ^1.9.4
material-components-web: ^0.39.1

From https://github.com/jamesmfriedman/rmwc/issues/280

If you have a controlled TextField with required set it will initially render as invalid due to the initial syncing of the React component props to the MDC component internal state. However, required fields should not render as invalid until they lose focus or the form is submitted.

Example:

import * as React from 'react'

// Components
import { TextField, TextFieldIcon } from 'rmwc/TextField'

// Types
export interface Props {
  value: string
  onChange: (username: string) => void
}

export default class UsernameInput extends React.PureComponent<Props> {
  public render() {
    return (
      <TextField
        outlined
        required
        label={"Username"}
        value={this.props.value}
        onChange={this.onChange}
        withLeadingIcon={<TextFieldIcon icon='person' />}
      />
    )
  }

  // Event handlers
  private onChange = (evt: React.FormEvent<HTMLInputElement>) =>
    this.props.onChange(evt.currentTarget.value)
}

[rjdestigter]

This was fixed with the release of 1.9 since MDC overhauled their internal validation checks. Please reopen if you are still seeing issues.

• @jamesmfriedman

Re-opened as I am still encountering this issue.

[j-o-d-o]

As a workaround (for now), you can either set the text field to valid after mounting or remove the required from the textfield and set it after mounting.

I created a code sandbox:
https://codesandbox.io/s/j239839xy

[jamesmfriedman]

Thanks for the repro @j-o-d-o and the workaround. I'll be able to fix it appropriately now.,

[jamesmfriedman]

@rjdestigter every once in a while I comb through the mat-web-react issues and I found the same one. Looks like this is upstream. I'll still look to see if I can patch the adapter / foundation which I've done in a few other cases to hack around the problem.

[jamesmfriedman]

Verified this will be fixed with the release of MDC 40 and RMWC 3.0.0

[robcaldecott]

This bug is back.

https://codesandbox.io/s/ypvmprv6n9

[jamesmfriedman]

Thanks for reporting. Experiencing a few regressions with 3.0.7. I’d recommend downgrading to the previous version for the time being.

[robcaldecottvelo]

I just had a crack at fixing it.

[robcaldecott]

I've gone back a few releases but it's still not working. I think my fix isn't going to hack it without access to the previous props in the sync method so you can choose to only call setValue if the value has actually changed (so the first sync won't call it, and the invalid classes won't be applied.)

[robcaldecott]

This fixes the issue:

class Text extends TextField {
  sync() {}

  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      super.sync(this.props);
    }
  }
}

[robcaldecottvelo]

Thank you!

[jamesmfriedman]

Should be out with todays patch. Added a test case to make sure this doesn't regress again, although due to having to patch native input validity onto JSDOM, I can't seem to get the full test case to work which would be render valid -> focus -> blur -> invalid.

[robcaldecottvelo]

JSDOM still doesn't do validity? Ugh.

[jamesmfriedman]

It kind of does with a polyfill I added in, but it’s more of an issue of JSDOM not mimicking the exact same validity behavior when you focus and then blur a required field (which should set it as invalid)