Textarea: autoResize doesn't work when used inside a Dialog

[Timmeeeey]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-fggov7

Current behavior
When a textarea with autoResize is used inside a dialog the height of the textarea is initially set to 0px.
It doesn't matter if the textarea is empty or not.

When you click inside the textarea the height is set correctly.

The problem appeared since #9129 was fixed.

Expected behavior
The height of a textarea with autoResize should be calculated correctly.

Minimal reproduction of the problem with instructions

<button pButton (click)="displayDialog = true" label="Open Dialog"></button>

<p-dialog [(visible)]="displayDialog">
  <textarea pInputTextarea rows="3" autoResize="autoResize"></textarea>
</p-dialog>

• Angular version: 10

• PrimeNG version: 10.0.2

• Browser: Tested in Chrome, Firefox

[serega270]

@Timmeeeey
This seems to happen because the resize occurs when the p-dialog is not even opened
Try to add *ngIf="displayDialog" to the component

<p-dialog [(visible)]="displayDialog" *ngIf="displayDialog">
...
</p-dialog>

[Timmeeeey]

@serega270
Thanks, this seems to work but I think it shouldn't be necessary to have visible and *ngIf at the same time.
Also I have to change all my dialogs.
I found out that wrapping the this.resize() in ngAfterViewInit inside a setTimeout also solves the problem.

InputTextarea.prototype.ngAfterViewInit = function() {
  if (this.autoResize) {
    window.setTimeout(() => this.resize());
  }
};

[testowy-uzytkownik-1]

Related to #7000

[cetincakiroglu]

Hi,

We couldn't replicate the issue with the latest PrimeNG (v13).
If the issue still exists with the latest PrimeNG version, please provide a StackBlitz example by using PrimeNG Issue Template and re-open the issue.

Regards

[Timmeeeey]

@cetincakiroglu Here is the updated version:
https://stackblitz.com/edit/github-7k18kj

Unfortunately I cannot repoen this issue. Could you please reopen it?

[Cito]

Please allow me to express my frustration about how bug reports are ignored for many months and then suddenly closed as "not reproducable with latest version" even when nothing has been fixed or changed in that regard. At least give us some time to react before closing the issue, since even the original author cannot reopen an issue that has been closed by an admin. The same happened to me with another issue yesterday.

[dev4ndy]

I have the same problem with primeng-lts 12.2.5 version, do you have any plan to fix it? it appears that this error has been there since 2018: #7000

[dev4ndy]

Hi,

We couldn't replicate the issue with the latest PrimeNG (v13). If the issue still exists with the latest PrimeNG version, please provide a StackBlitz example by using PrimeNG Issue Template and re-open the issue.

Regards

@cetincakiroglu so the only way to solve this is to upgrade?

[Timmeeeey]

The bug still exists in PrimeNg 14.2.2.

@cetincakiroglu Could you please reopen this issue?

https://stackblitz.com/edit/github-7k18kj-hivu3g

[ProfEibe]

@cetincakiroglu It is still there in PrimeNG 16

[cetincakiroglu]

Fixed now, it'll be available in the upcoming release.

Thanks for reporting the issue!

[Emiliorth]

Still exists in 17.8, now even with ngIf

[Taleynikov]

Still exists in 17.8, now even with ngIf

I solved the problem "this way"

[Emiliorth]

Ah yea, me either, maybe with setTimeout

[jules-js]

issue still exists in 17.12.0!

[Junior-Stalin]

still exists in 17.18.6

[marcschroeder]

The issue seems to happen when using a Textarea in a Tabview as well. It only seems to be an issue when using the autoResize option.

[marcschroeder]

@cetincakiroglu can we reopen this issue?

[WStewart110]

Also having this issue on tabView.

[vanelli26]

[html]

<textarea id="dsObservacao" pInputTextarea formControlName="dsObservacao" placeholder="Observação" rows="3" cols="30" [autoResize]="true"> </textarea>

[css]
textarea#dsObservacao {
height: auto !important;
}

[AnthonyLzq]

Guys, this problem persist, why are you closing something that is not solved yet?

In my case it's happening when there is a textarea inside a p-tabView. I'm using v^15.4.1.

I was able to "solved it" using a min-height attribute in my styles. In my case, the textarea inside the p-tabView renders properly, so I got the height from there and then I used it as follows:

<textarea
  rows="12"
  pInputTextarea
  [autoResize]="true"
  style="resize: none; min-height: 200px !important"
></textarea>

Hope it helps.