How to remove the 2nd row in a TextArea while maintaining the rest of the auto-resize behaviour

Flow
1

I am working with a default TextArea (no extra styling applied except removing the background color) and I want to get rid of the minimum height which is 2 lines, even when there is just one line of text
I have tried to use textArea.setMinHeight("30px"); to make it smaller, as stated in the documentation, but this does not seem to override the 2 line minimum height of the actual element.
Is there any way I could override it, or maybe calculate when a 2nd line is needed and do some magic with applying/removing a CSS class with a fixed or auto-height based on that?

Using Vaadin 24 and just the standard TextArea() component from vaadin flow.
I’m a bit of a newbie to Vaadin so I apologize if this is already documented somewhere and I just missed it :sweat_smile:

2

The min height comes from the default 2 rows that a native has. The most stable way to get around that, while maintaining the auto-expansion, would probably be to override that default. Unfortunately there is no API for it, but I think this might do it:

textArea.getElement().executeJs("this.inputElement.rows = '1'");

3

That’s exactly what I was looking for, thanks!