bug: autogrow on ion-textarea breaks content

[Kokkinis99]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When the autoGrow property is set to true, the textarea grows to a point and the starts being scrollable. However the content is pushed up and you can't scroll back to the top of your text, hiding the first lines.

Expected Behavior

The autoGrow property should not make the textarea scrollable, or at least if it should, it should not hide any content.

Steps to Reproduce

1. Create an ion-textarea component
2. Set the autoGrow property to true
3. Start writing text until the textarea starts scrolling and hides the top lines of your text
4. Try to scroll back up

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.2.0
@angular-devkit/build-angular : 16.1.4
@angular-devkit/schematics : 16.1.4
@angular/cli : 16.1.4
@ionic/angular-toolkit : 10.0.0

Capacitor:

Capacitor CLI : 5.3.0
@capacitor/android : 5.3.0
@capacitor/core : 5.3.0
@capacitor/ios : 5.3.0

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v18.16.1
npm : 8.19.2
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. This is an issue with how we represent the autoGrow demo on the docs. The .container element we wrap the textarea in causes the text to get clipped on scroll. Going to move this to the docs repo.

[sean-perkins]

Hello,

This was resolved in #3219. You can see the updated demo example here: https://ionicframework.com/docs/api/textarea#autogrow

Thank you for reporting this issue!