Floating label on textfield overlaps with input value

[Ranguna]

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]

Thanks for filing the issue. I'm able to reproduce and actually get the same effect if i swap out
onBlur={()=>this.setState({value:"Noooo"})} --> onBlur={()=>this.setState({value:"Noooo"})}.

The issue is the react component only updates the value in the textField component onChange. This breaks when anything else updates value (ie. blur, focus). SO I think the solution is moving when the handleValueChange() method is called to componentDidUpdate.

[Ranguna]

Oh yeah nice and quick fix, great work 👍
Should this be closed now or after the PR merge ?

[moog16]

This seemed important and quick :)

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

[derektumulak]

I've just run this this issue with some of the fields that I'm using. I'm a bit of a newbie and wondering what the best way is for me to resolve this. Are there any recent best practices?

Thanks in advance!
-Derek

[moog16]

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