Floating label on textfield overlaps with input value

The floating lable in a text field overlaps with the input text when it’s removed and reset with onblur:

Steps to reproduce

Create a text field with an onblur method that resets the value to something else:

import React, { Component } from 'react';
import TextField, {Input} from '@material/react-text-field';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {value:"hello"};
  }

  render() {
    return (
      <div className="App">

        <TextField outlined label='Label'>
          <Input
            value={this.state.value}
            onBlur={()=>this.setState({value:"Noooo"})}
            onChange={(e)=>this.setState({value:e.target.value})}
          />
        </TextField>
      </div>
    );
  }
}

export default App;

1. Delete all content in the input field
2. Press anywhere outside the text field
3. Let the bug happen

Maybe a fix could be to reuse the code that checks if there’s text in the input when the text field is mounted (this is done to prevent the lable from overlaping the input text when it’s mounted in case a value is set from the beginning) to check every time it blurs or every time the class changed to --float-above ?

[moog16]

This seemed important and quick 😃

We’ll leave it open until it is merged into master - Thanks again

[moog16]

@derektumulak are you still running into this? A codepen/stackblitz will help in helping you.