How to hide the vertical scroll bar when maxRows is defined

Long Story Short

I’m trying to hide the vertical scroll bar when the number of lines exceeds maxRows. For example I have foo\nbar in the textarea and maxRows is set to 1. To do so I pass overflow: "hidden" to the style attribute of the component. Apparently this attribute in particular is ignored. I tried also overflowY: "hidden" without success.

Expected Behavior

The style attribute overrides also the overflow* attributes.

Actual Behavior

The component ignores the specified overflow* style attributes.

Use Case

I’m building a component that is a one-line field. When it gets focus, I want this component to expand to its full size. When I leave, I want this component to get back to one-line only [edit] without a scroll bar.

[FrancescoCioria]

So basically, as you already said, overflow-x: hidden and overflow-y: scroll are enforced by autosize which also removes any overflow style.

The problem here is that overflow-y: scroll is needed by autosize to work correctly so it would be too risky to mess with it…

The easiest solution for you would be to programmatically add a class overflow-hidden-important when you set maxRows={1} and then, in the CSS, set .overflow-hidden-important { overflow: hidden !important }.

[cecton]

Thanks! I think this will do the trick. Too bad there isn’t a cleaner way…