TextField / Select wrong render when props changed fast

[Wroud]

What RMWC Version are you using?

checked on 1.4.1 and 1.5.5

What browser(s) and React Version is this bug affecting?

Google Chrome 66.0.3359.117, React 16.3.1

What are the steps to reproduce the bug?

play with setTimeout delay & spam TEST button for reproducing bug

Any other information you believe would be useful?

Seems like bug depends of fields count and how fast render occurs
Also if props disabled=false but rendered as disabled=true in react-devtools set prop to true
class on div will be mdc-text-field--upgraded mdc-text-field--disabled mdc-text-field mdc-text-field--upgraded mdc-text-field--disabled

its like wrong class appending after props changed
also after textfield rendered div has class="mdc-text-field--upgraded mdc-text-field mdc-text-field--upgraded" why mdc-text-field--upgraded appended two times? its same bug?

[jamesmfriedman]

This is a really interesting bug. While React is responsible for rendering the markup, a lot of the work is delegated to the MDC code. There is definitely a communication issue somewhere in there.

Definitely something that I'll look into, but curious if it's blocking you right now, trying to figure out where to prioritize this one.

[Wroud]

it's not blocking me, im added 100ms delay in my saga as temporary fix

[Wroud]

checked code, look at this line
and this one
i think solution may be

export const addClass = () =>
  function(className: string) {
    if (!this.state.classes.has(className)) {
      this._safeSetState(prevState => {
        if(prevState.classes.has(className)) {
          return null;
        }
        return classes: prevState.classes.add(className)
      });
    }
  };

export const removeClass = () =>
  function(className: string) {
    if (this.state.classes.has(className)) {
      this._safeSetState(prevState => {
        if(!prevState.classes.has(className)) {
          return null;
        }
        return classes: prevState.classes.delete(className) ?
          prevState.classes :
          prevState.classes
      });
    }
  };

[jamesmfriedman]

Thanks! Thats a huge help. I think I know a way around this, I'll look into it.

[rjdestigter]

@jamesmfriedman Is this maybe related? https://codesandbox.io/s/62040p3mw

Basically, for the TextField component, when the value prop changes to undefined it does not clear the input. I resolved this by sending in an empty string if the value is undefined or null but that renders the TextField in a state of invalidity even though it hasn't had focus yet.

If not I can create an issue for this separately.

[jamesmfriedman]

Fixed in 1.5.6, please verify in your codebases.

[Wroud]

It's seems fixed now, but i think you need move if statement in ._safeSetState((prevState)=> {here}) because this.state and prevState can be different