Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Timmeeeey opened this issue Sep 3, 2020 · 21 comments
Closed

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

Timmeeeey opened this issue Sep 3, 2020 · 21 comments
Assignees
Labels
LTS-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@Timmeeeey
Copy link

Timmeeeey commented Sep 3, 2020

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.

image
image

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

image
image

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
Copy link

@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
Copy link
Author

@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());
  }
};

@yigitfindikli yigitfindikli added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Nov 24, 2020
@yigitfindikli yigitfindikli self-assigned this Nov 24, 2020
@testowy-uzytkownik-1
Copy link

Related to #7000

@cetincakiroglu cetincakiroglu removed the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Mar 28, 2022
@cetincakiroglu
Copy link
Contributor

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
Copy link
Author

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

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

2022-03-29_08h40_05

@Cito
Copy link
Contributor

Cito commented Mar 29, 2022

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
Copy link

dev4ndy commented Aug 16, 2022

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
Copy link

dev4ndy commented Aug 16, 2022

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
Copy link
Author

The bug still exists in PrimeNg 14.2.2.

@cetincakiroglu Could you please reopen this issue?

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

@ProfEibe
Copy link

@cetincakiroglu It is still there in PrimeNG 16

@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 28, 2023
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Sep 28, 2023
@cetincakiroglu cetincakiroglu added this to the 16.4.2 milestone Sep 28, 2023
@cetincakiroglu cetincakiroglu self-assigned this Sep 28, 2023
@cetincakiroglu
Copy link
Contributor

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

Thanks for reporting the issue!

@Emiliorth
Copy link

Emiliorth commented Feb 29, 2024

Still exists in 17.8, now even with ngIf

@Taleynikov
Copy link

Still exists in 17.8, now even with ngIf

I solved the problem "this way"

image
image

@Emiliorth
Copy link

Ah yea, me either, maybe with setTimeout

@jules-js
Copy link

jules-js commented Apr 2, 2024

issue still exists in 17.12.0!

@Junior-Stalin
Copy link

still exists in 17.18.6

@marcschroeder
Copy link

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
Copy link

@cetincakiroglu can we reopen this issue?

@WStewart110
Copy link

Also having this issue on tabView.

@vanelli26
Copy link

[html]

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

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

@AnthonyLzq
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
LTS-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests