Text-Field setState problem

[aabeborn]

Hi the textField component gives me this error when i click on it. This error is fired only with the standard component. Whit the outlined all works correctly apart for the style(i think I'm wrong there).
This is my code
the error:

The piece of code:
<TextField className="search" label={props.text} trailingIcon={<MaterialIcon icon="search" />} > <Input value={props.value} onChange={event => props.change(event); } /> </TextField>

[moog16]

@benn983 I tried running your component in a test app. I attached it in the issue.

directions

1. open in terminal
2. yarn
3. yarn start

browser should open to localhost:3000. It looks like text field is working as designed. My only confusion is what your props variable is coming from. That could be the source of your problem. Also you don't need a semi-colon in your onChange method.

testapp-copy.zip

[sashless]

@moog16 I tried this using the device toolbar in chrome and on a real mobile device and can reproduce that there. It is impossible to set any value.

The Problem is present in 0.5 and 0.4.2 as well.

[sashless]

The problem seems to be in foundation of material/textfield where clientX and clientY is missing in the event and the value normalizedX passed to setLineRippleTransformOrigin is NaN.

 setTransformOrigin(evt) {
    const targetClientRect = evt.target.getBoundingClientRect();
    const evtCoords = {x: evt.clientX, y: evt.clientY};  // not present on mobile
    const normalizedX = evtCoords.x - targetClientRect.left; // this is NaN
    this.adapter_.setLineRippleTransformOrigin(normalizedX); // passing here null or a proper number works.
  }

The foundation is using the same event listener for mousedown and touchstart.

['mousedown', 'touchstart'].forEach((evtType) => {
      this.adapter_.registerInputInteractionHandler(evtType, this.setPointerXOffset_);
    });

To fix that it should use evt.touches for the touchstart event.

[moog16]

@sashless - got it. It looks like I can also reproduce on Mac OSx Chrome when you use the mobile mode. We'll start investigating

[moog16]

This is actually an MDC Web bug: I've filed here: material-components/material-components-web#3643.

In the interim until that is fixed in MDC Web, I think we can get around this by checking isNaN() in the line ripple componentDidUpdate:

if (this.props.rippleCenter !== prevProps.rippleCenter && !isNaN(this.props.rippleCenter) {
      this.foundation_.setRippleCenter(this.props.rippleCenter);
}

This will unfortunately remove this feature for mobile browsers, but at least it won't throw an error.