Ionic-framework: bug: ion-textarea autoGrow=“true” on modal, work only the first time

Created on 4 Aug 2019  ·  5Comments  ·  Source: ionic-team/ionic-framework

Expected behaviour:
Each time the ion-textarea should be the same size.

Actual behaviour:
I have a strange behaviour with ion-textarea autoGrow="true" that was introduced in ionic 4.4, the first time the autoGrow is made correctly. The 2nd time the textarea is less than 1 row. We can't even see the text. This bug is only on "modal".

I open the modal like this

```
displayModal(data) {
this.modalCtrl.create({
component: EventDetailModalComponent, componentProps: {
event: data.appointmentData,
timeFormat: this.timeFormat,
dateFormat: this.dateFormat
}
}).then(modalElement => {
modalElement.present();
}); }

And close like this :

   `onCancel() { this.modalCtrl.dismiss(); }`
View contains :


{{'DESCRIPTION' | translate }}


```
For info, the text is inserted manually by the programme in value="x", not entered by the user.

I'm running the last version of ionic ("@ionic-native/core": "^5.11.0") and Angular (8.2).
Same problem tested on last version of Chrome, Safari and FireFox on Mac.

You can test here :
https://stackblitz.com/edit/ionic-v4-angular-ion-textarea-autogrowth

This was already reported on "stackoverflow":
https://stackoverflow.com/questions/57336796/ion-textarea-autogrow-true-on-modal-work-only-the-first-time
They came to the conclusion that should be a bug.

core bug

Most helpful comment

Confirmed. Still present in @ionic/angular: 4.11.1 It's not an onChange issue. Because the modal is presented with different text examples. I think it's a lifecycle issue (initialize order with maybe async parts). e.g. reset the value with setTimeout in ngOnInit in a second. (simply add a space to the string.) But why is this always working on the first time?

One workaround could be using contenteditable instead of textarea. With a few styles like outline: 0 and line-height 1.5em. etc. But it's more recommended to fix this bug.

Source code

All 5 comments

Confirmed. Still present in @ionic/angular: 4.11.1 It's not an onChange issue. Because the modal is presented with different text examples. I think it's a lifecycle issue (initialize order with maybe async parts). e.g. reset the value with setTimeout in ngOnInit in a second. (simply add a space to the string.) But why is this always working on the first time?

One workaround could be using contenteditable instead of textarea. With a few styles like outline: 0 and line-height 1.5em. etc. But it's more recommended to fix this bug.

Source code

Hello, this issue is still present in @ionic/angular: 5.0.5.

For some reason or another, I am only seeing this on md, not ios.

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20971, and a fix will be available in an upcoming release of Ionic Framework.

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brandyscarney picture brandyscarney  ·  3Comments

BilelKrichen picture BilelKrichen  ·  3Comments

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  ·  3Comments

MrBokeh picture MrBokeh  ·  3Comments

RobFerguson picture RobFerguson  ·  3Comments