[TextArea]: Large Text Inside Text Area Resizes the Page

[m1trix]

Bug Description

When a ui5-textarea is being used with the growing property set to true and the text within the component is taller than the textarea itself (e.g. has a lot of lines) the text itself is cut-off by the border of the textarea but the height of the page gets increased as if the text itself is placed outside of the textarea.

Details

Tested on https://sap.github.io/ui5-webcomponents-react

Setup

• rows = 4
• growing = true
• growingMaxLines = 5
• value = the numbers from 1 to 200, each on a new line

It looks like that setting growing=true breaks the component.

Affected Component

ui5-textarea

Expected Behaviour

The page should not resize, similar to how a native textarea HTML component does not affect the page it is placed in, when its content's height exceeds its own height.

Isolated Example

Link to Code Sandbox

Steps to Reproduce

1. Have a UI5 TextArea with rows = 4, growing = true, growingMaxLines = 5
2. Input a text that is taller than the page (e.g. numbers from 1 to 500)
3. Observe how the page itself gets extended in height.

Log Output, Stack Trace or Screenshots

Priority

Medium

UI5 Web Components Version

1.19.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Organization

SAP

Declaration

• I’m not disclosing any internal or sensitive information.

[kgogov]

Hello @m1trix,

Thanks for reaching out to us, our team will review your report shortly.

Best,
Konstantin

[kgogov]

Hello @SAP/ui5-webcomponents-topic-rl,

After reviewing the reported issue with the ui5-textarea component, it seems that in this case, there is a problem with using the growing property. Please, refer to this CodeSandbox the author has provided.

Could you take a look?

Best,
Konstantin