bug: Textarea does not show scrollbars when contents overflow

[ReneZeidler]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

ion-textareas with a fixed or max height do not show a scrollbar when the text height exceeds the textarea height. Scrolling with the scroll wheel also doesn't work.

Expected Behavior

A vertical scrollbar appears when the textarea contains more text than the vertical available space. The user can scroll inside the textarea using the scroll wheel or scrollbar.

Steps to Reproduce

1. Clone the reproduction repository
2. Start the project
3. Observe that the textareas under "Current behavior" cannot be scrolled, making the full contents unreadable
4. The textareas under "Expected behavior" have "overflow: unset" applied to them via a global style, allowing normal scroll behavior.

Alternatively, visit https://ionicframework.com/docs/api/textarea and enter more than 3 lines in the first live example under "Basic Usage" (labelled "Regular textarea"). You're unable to scroll inside the textarea.

Code Reproduction URL

https://github.com/ReneZeidler/bug-textarea-scroll

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/usr/local/share/npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.3.6
@angular-devkit/build-angular : 14.2.9
@angular-devkit/schematics : 14.2.9
@angular/cli : 14.2.9
@ionic/angular-toolkit : 6.1.0

Utility:

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

System:

NodeJS : v16.18.0 (/usr/local/bin/node)
npm : 9.1.1
OS : Linux 5.10

Additional Information

The regression was introduced by commit a9cf2ab as a fix for #24793.

However, fixing the bug for textareas with autoGrow="true" broke scrolling for textareas with autoGrow="false" (the default) by setting overflow: hidden on the native textarea element.

[sean-perkins]

@ReneZeidler thank you for reporting this issue.

Yes, we likely need to apply the overflow: hidden style only for when auto grow is used on the textarea.

We will capture this as a bug and prioritize. Thanks!

[sean-perkins]

Hello @ReneZeidler can you test with this dev-build and let me know if you run into any issues?

npm install @ionic/angular@6.3.7-dev.11668447091.1afa4f71

[ReneZeidler]

@sean-perkins Thank you for the very quick response!

I can confirm that this build fixes the issue.

[sean-perkins]

Awesome, thank you for testing!

This bug has been resolved and will be available in the next patch release of Ionic (6.3.7).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.