Floating label on text-field does not move when value prop changes.

[bsswartz]

[moog16]

Can you please provide a stackblitz or code example? It is difficult to diagnose without such.

[bsswartz]

@moog16

Here is a stackblitz: https://stackblitz.com/edit/react-3q3vjk

import React, { Component } from 'react';
import { render } from 'react-dom';
import TextField, {HelperText, Input} from '@material/react-text-field';
import './style.css';
import '@material/react-text-field/dist/text-field.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      text: ''
    };
    this.onTextChange = this.onTextChange.bind(this);
  }

  onTextChange(evt) {
    this.setState({text:evt.target.value});
  }

  render() {
    return (
      <div>
      <div>
        <TextField
          label='Type here'
          helperText={<HelperText>Help Me!</HelperText>}
        ><Input
           value={this.state.text}
           onChange={this.onTextChange}/>
        </TextField>
      </div>

      <div>
        <TextField
          label='This label should move'
          helperText={<HelperText>Help Me!</HelperText>}
        ><Input
           value={this.state.text}
           onChange={this.onTextChange} />
        </TextField>
      </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

[bsswartz]

I observe the error using Chrome 74, iOS Safari 12, and Edge 18; it does not seem to be a browser bug.

[Fa-So]

Here it is simulated differently again:
Textfield floating Input problem

import * as React from "react";
import { render } from "react-dom";
import TextField, { Input } from "@material/react-text-field";

import "@material/react-text-field/dist/text-field.css";

const App = (): JSX.Element => {
  const [val, setVal] = React.useState("");
  React.useEffect(() => {
    setVal("Material Components for React");
  }, []);
  return (
    <TextField label="MDC React" outlined={true}>
      <Input value={val} />
    </TextField>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

If Textfield is previously initialized with a space, then it works

const [val, setVal] = React.useState("_");

Also in the above case of bsswartz

this.state = {
  text: '  ' <-- space
};

Of course it is not right

[moog16]

Gotcha - this is definitely a bug. I'll investigate.