Material-ui: In Multiline textField scroll appear when number of line is less then maxRows

[carpben]

In certain screen width scroll appears even when it shouldn't, when the number of lines is less then the defined number of maxRows.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expect scroll to appear only when the number of lines in a multiline text field is bigger then the defined maxRows.

Current Behavior

I defined maxRows to be 8. When I make the screen narrow scroll can appear when there are only 7 rows, giving a viewport of only 6 rows.

Steps to Reproduce (for bugs)

1.Define max rows of 8.

1. define width by percentage.
   3.add text,
   4.and change the width of the window.

Context

I'm trying to make a to do app with some multiline text fields. The app is responsive.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | next |
| React | 16 |
| browser | chrome |
| etc | windows 10 |

[barbalex]

In my case this happens quite frequently. And I do not set max rows.

In my case I use react-reflex to enable changing component width. This also provokes rerendering.

I have noticed these behaviours:

• mounting of component: Sometimes but not always text field is not high enough which results in scrollbars. Text fields seem never to be too hight though.
• rerendering of component: Sometimes existing scrollbars disappear. Other times they remain. Or appear.
• what is more annoying is that when a component is widened and rerenders, big empty areas can result when text fields remain as high as before. This does also not always happen but quite often.

[carpben]

How long until this bug can be fixed? Will anyone notify us here?
I might try to build a react solution based on this solution https://codepen.io/vsync/pen/frudD

[mbrookes]

How long until this bug can be fixed?

That depends on how long it is until someone who has an interest in it being fixed commits the time to fix it.

[MikeSuiter]

I'm seeing this too but only in Chrome on Windows (10). Firefox and Edge don't show the scrollbar and Chrome on Mac and iOS don't show it either. I think to note is I have 4K monitors so don't know if that could be the problem.

Here is a simple example that shows the problem on Chrome in Windows.

https://codesandbox.io/s/0pmlxmp7p

Here is what it looks like.

[carpben]

I don't have a 4k screen, but have the scrolling issue.

[ValentineStone]

I dug into this, and the problem is in the Input/Textarea.js

It has a funky height determining algorithm, which causes the issue in Chrome due to what looks like ~1px height fluctuations based on textarea's value
The algorithm's maxHeight calculation also seems to be bug-prone, although I haven't tested it thoroughly.

I managed to fix this issue using react-textarea-autosize, and threw down a little demo to illustrate:
https://codesandbox.io/s/p5xokrw8q

As you can see it already works flawlessly (as far as I can tell) by just utilizing inputComponent and inputProps, and it also happens to address https://github.com/mui-org/material-ui/issues/11375 feature request, as is demonstrated by the small textarea in the demo.
This solution also avoids creating 3 textarea's for a single <Input multiline/> 😉

I also fiddled with Input/Textarea.js, and kind of managed to get that fixed, but whatever was the cause of the necessity of pull request https://github.com/mui-org/material-ui/pull/11159, might have something to say about that fix, since like I said height fluctuations are 1px, and the infinite render loop prevention thing is insensitive to that.

All that said I would recommend using react-textarea-autosize internally as a dependency and scrapping Input/Textarea.js, if that is ok with the project's dependency using/not using approach.

I can work on implementing and flushing it with the existing <Input/> API withing a couple of days if I get the green light for it 🚦 from @oliviertassinari or anybody who can authorize the dependency usage 😊

[Pajn]

This issue is even reproducible on the demo page https://material-ui.com/demos/text-fields/ (test in With placeholder multiline)

@ValentineStone's demo works great for me.
I don't want to bug the maintainers but it would be nice with a 👍 or 👎 on if adding react-textarea-autosize would be an acceptable solution. It ways in on 1.8 kB minified & gzipped according to their readme.

[MrXyfir]

This is _still_ an issue.

[giorgi-m]

@oliviertassinari I have similar issue I have this

    <TextField
             label={'test'}
             value={"test"}
             multiline
             rowsMax="2"
             onChange={this.handleFieldChange}
             name={'description'}
      />

Even though text area shows one line, there is still a small vertical scrollbar next to it. I can't see how referenced issue, solved this, can someone help?

version: @material-ui/core: ^3.3.2

[oliviertassinari]

@giorgi-m Does it reproduce with the latest version?

[giorgi-m]

@oliviertassinari Do you mean it was fixed in v4?