bug: ion-textarea autogrow with long text

[tetkosimi]

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

Current Behavior

When textarea contains long text, and auto-grow function is turned on, a big gap remains at the bottom of textarea. The gap is getting bigger as the text gets longer.

Expected Behavior

Calculate the size of the content properly, even for long texts.

Steps to Reproduce

1. Clone the repo below and run npm i

2. Start the project and open in desktop resolution. (It was tested on Google Chrome).

3. Scroll to the bottom of page.

4. You can write edit the content of textarea, the gap will remain.

Code Reproduction URL

https://github.com/tetkosimi/bug-ionic-textarea

Ionic Info

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.7
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.2.9
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI   : 3.2.4
   @capacitor/core : 3.2.4

Utility:

   cordova-res (update available: 0.15.4) : 0.15.1
   native-run (update available: 1.5.0)   : 1.4.1

System:

   NodeJS : v16.13.0 (/home/bekkeri/.nvm/versions/node/v16.13.0/bin/node)
   npm    : 8.1.0
   OS     : Linux 5.10

Additional Information

I think, an overflow-y on the native textarea would be enough to solve this issue, as you can see on the right in the example.

[sean-perkins]

@tetkosimi can you provide a screenshot/video of the issue you are experiencing? Comparing against your reproduction, I am seeing the same display on the "Wrong" and "Fix" version.

Thanks!

[tetkosimi]

Hi @sean-perkins, here's a screenshot:
https://github.com/tetkosimi/bug-ionic-textarea/blob/main/screenshot.png

You're right, I just checked this issue on macOS with the latest Google Chrome and also couldn't reproduce, but I can still reproduce it on Window 10 with the latest Google Chrome.

[tetkosimi]

I've also checked on Windows 10 with Firefox, and the big gap is there, however I can't reproduce it on Android.

It seems like this is just some kind of native scroll or scrollbar related issue on Windows.

[sean-perkins]

@tetkosimi thanks for the screenshot! I'm noticing similar behavior on MacOS with Firefox (renders incorrectly and eventually repaints correctly).

Could you try this dev build against your local with Windows 10?

npm install @ionic/[email protected]

The build is off this PR that I started awhile ago to re-approach our auto-grow implementation. It appears to resolve the issue for Firefox on Mac, curious if it'll do the same against Windows.

Thanks!

[tetkosimi]

I've tried the dev build and it resolves the issue on Windows too.
Nice job, thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via #24205 and a fix will be available in an upcoming release of Ionic.

[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.