Dropdown in p-dialog is not working properly for mobile view

[PotatoDoge]

Describe the bug

My dropdown works fine when using a full screen on a computer's web browser. The issue happens when trying to use this component on a screen size of a mobile phone. Dropdown is inside a p-dialog (modal)

The screenshot's code is copied and pasted from primeng official dropdown documentaiton

Environment

"dependencies": { "@angular/animations": "^17.1.0", "@angular/common": "^17.1.0", "@angular/compiler": "^17.1.0", "@angular/core": "^17.1.0", "@angular/forms": "^17.1.0", "@angular/material": "^17.1.2", "@angular/platform-browser": "^17.1.0", "@angular/platform-browser-dynamic": "^17.1.0", "@angular/router": "^17.1.0", "@fortawesome/angular-fontawesome": "^0.10.0", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "font-awesome": "^4.7.0", "lodash": "^4.17.21", "primeflex": "^3.3.1", "primeicons": "^6.0.1", "primeng": "^17.6.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.1.3", "@angular/cli": "^17.1.3", "@angular/compiler-cli": "^17.1.0", "@types/jasmine": "~5.1.0", "@types/lodash": "^4.14.202", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.3.2" }

Reproducer

No response

Angular version

17|

PrimeNG version

17

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.6.1

Browser(s)

Chrome

Steps to reproduce the behavior

1. Angular component with dropdown in modal
2. Switch to mobile view and trigger dropdown options

Expected behavior

[PotatoDoge]

This issue only happens if the dropdown is inside a p-dialog, here is the code that I have:

`<p-dialog header="Task" [(visible)]="newTaskDialogVisible" [modal]="true" [style]="{ width: '50rem' }" [appendTo]="'body'"
[breakpoints]="{ '1199px': '75vw', '575px': '90vw' }" [draggable]="false" (onHide)="closeNewTaskDialog()">

{{ title.value?.length }} / 30

Please ensure that the title is no longer than 30 characters.

<textarea rows="8" cols="25" pInputTextarea formControlName="description" class="w-full" name="description" placeholder="Description"></textarea>

`

[PotatoDoge]

The same happens with p-autocomplete:

<p-autoComplete [(ngModel)]="selectedMemberEmail" [suggestions]="filteredMembers" (completeMethod)="filterMembers($event)" (onSelect)="onMemberSelect($event)" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" optionLabel="email" placeholder="Email" [appendTo]="'body'" class="autocomplete-width wider-autocomplete-input"> </p-autoComplete>

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!