Max-height of TextArea is not respected when used with CollaborationBinder

[bwajtr]

Describe the bug When I bind TextArea to the CollaborationBinder, and I set a tall text into it, it does not use the scrollbar at all but instead overflows into other components. No other (collaborating) user is necessary to reproduce this - it happens right after the page refresh - you only have to set a tall enough text to the TextArea,

To Reproduce Steps to reproduce the behaviour:

@Route(value = "")
public class CollaborationTextAreaBug extends VerticalLayout {

    public CollaborationTextAreaBug() {
        var textArea = new TextArea();
        textArea.setWidth("200px");
        textArea.setHeight("200px");
        textArea.setValue(reallyTallText);
        add(textArea);

        add(new Span("This text should be visible and not hidden or painted over by text area"));

        CollaborationBinder<TextValueModel> binder = new CollaborationBinder<>(TextValueModel.class, new UserInfo("1", "Bretislav Wajtr"));
        binder.forField(textArea).bind("textValue");
    }

    private static class TextValueModel {
        private String textValue;

        public String getTextValue() {
            return textValue;
        }

        public void setTextValue(String textValue) {
            this.textValue = textValue;
        }
    }

    private static final String reallyTallText = "asdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\nasdf asodij asdfoia wefoias df\n";
}

Expected behavior I expect TextArea to behave the same way as when a normal binder is used with it -> to use scrollbars for tall texts.

Screenshots

Versions

• Vaadin version: 23.3.3
• Collaboration Engine version: 5.3.0
• Java version: 17
• OS version: Windows 10 Pro
• Browser version (if applicable):
• Application Server (if applicable):
• IDE (if applicable):

[Legioth]

This is caused by the field highlighter setting overflow: visible on the <vaadin-input-container> element.

Can be reproduced without CollaborationBinder by doing textArea.getElement().executeJs("customElements.get('vaadin-field-highlighter').setUsers(this, [])");

[Legioth]

Can be worked around by manually changing the style after configuring the binder.

textArea.getElement().executeJs("this._inputField.style.overflow='auto'");