[TextField] Floating Label Text overlaps the inputted text when the textfield is in a table.

[jronSomers]

Problem description

The TextField's Floating Label Text is broken when it is within a Table in a TableRowColumn.

You can input some values and the floating label text falls back down on top of the text you typed. There was a similar issue in the past but it was related to autofill I believe but the results look similar (the floating label text overlaps the text in the input).

Link to minimally-working code that reproduces the issue

Here is a link that reproduces the issue. It does work with 0.16.0. I couldn't reproduce it at first until I noticed i'm using 0.16.1 and webpackbin was using 0.16.0. I updated it to 0.16.1 and voila.

Actually, it is still broken in 0.16.0 but if you wait to defocus the text field, the floating label text will stay floating. But if you adjust a text field on the same row, it causes the other text field to fall down.

http://www.webpackbin.com/V1tWeXQxG

Versions

• Material-UI: 0.16.1
• React: 15.3.2
• Browser: Chrome@54.0.2840.71 m

[j0hnsmith]

I think this is a dup of #3738, it happens outside of a table too.

[lucasbento]

Thanks for commenting on this, @j0hnsmith.

@jronSomers: your issue is happening because your code seems to be passing an undefined value to the prop value on the <TextField /> component. If you remove the value prop you will see that it works perfectly.

I wasn't able to fix it, your code seems a little too confusing, you are also mutating the state on initializeRows() method, please don't do that, you should always use the setState() function.

I'm closing this issue since it doesn't seem to be a Material UI related problem.

[jronSomers]

@lucasbento Hey, thank you very much for looking into my issue. Sorry about not having a 100% accurate example, I am making a copy of the rows and then I call setState to assign the state's rows to the initialized rows.

I am trying to dynamically create a certain number of rows in a table, all with unique identifiers as well. The columns in this table are static by the way so that makes it a bit easier. I don't really know the number of rows i will need until the user inputs the number and then moves on to the next page where that number of rows will be rendered in the table. So with that, I use the square brackets, [ ] , on a variable that contains the new variable's name (not value). So its like saying "txtField12" would turn into let txtField12 = ''. So I hope that clears up the confusion... please let me know if that doesn't help and I can elaborate more.

Also, according to the controlled text field example on the material-ui demo website, they use the prop value in <TextField />. Are we not supposed to use that? And also, it seems that the object in the state is getting assigned the correct value that I put in too when using the value prop. Is it undefined when it is first loaded and that freaks out the component?

But I do agree, removing the value prop does fix this issue but I also don't know how I can set the value of a text field with data that i pull from the back end if I can't use the value prop?

Thanks again!

[joshlangner]

@lucasbento just wanted to confirm, was this ticked closed because it is indeed a dupe of #3738?