[TextField] doesn't show all content until edited

[deadbeef404]

I'm not sure if this is a bug or a grey-area in the documentation that needs to be clarified.

In the example linked below, there are four lines of text in the multiline text box, but as rows has been defined as being 1, only one row is entered until the box is edited.

https://www.webpackbin.com/bins/-Kmyge1aQv9GniK0sHMM

I was expecting the text area to be appropriately sized on load to display all the required rows unless the number of rows is greater than rowsMax. I feel that is an reasonable expectation as

1. it only resizes after you change the content (it doesn't resize on click)
2. once you click away from the that text area, it doesn't shrink back down.

I think first, I need some clarification on what rows is intended to be. The documentation says Number of rows to display when multiLine option is set to true., but that is an insufficient description as due to the autoresizing functionality, rows seems to be more of a minimum row count.

Is it more accurate to say rows is The minimum number of rows to display when multiLine option is set to true?

I can make a PR to make all the content in the field be displayed on load (I've determined the one-line fix), if that's what is expected.

Versions

• Material-UI: 0.18.3
• React: 15.6.1
• Browser: Chrome, but reading the code indicates it would be an issue on all browsers)

[brendanmh]

I was about to open an issue for this too.

I see it as a two-line fix, to pass this.props.value to the calls to syncHeightWithShadow in componentDidMount() and handleResize(). Otherwise the code judges the height of the content to be the height of the hint text, which is likely to be one row.

Is that what you had in mind?

[deadbeef404]

@brendanmh

pass this.props.value to the calls to syncHeightWithShadow in componentDidMount()

Yes, that's that one I was thinking. I think I'll just make a PR for this change and add a unit test for it.

and handleResize()

I didn't notice that issue, but it definitely is highly related to this one. Would you like to make a PR for that one and add a related unit test?

[damien-monni]

I am waiting for this to be fixed too.
The workaround I am using now is to set hintText prop only if the textarea value is empty.

[brendanmh]

#7260