Component: Dropdown > Last Child of DropdownList remains selected

[domsprung]

Describe the bug

When using the Dropdown component, the last item of the dropdown selection list is permanently displayed when selected. This means there is no longer any option to select other options.

Environment

"dependencies": {
"@angular/animations": "^16.2.12",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12",
"@angular/service-worker": "^16.2.12",
"@microsoft/signalr": "^8.0.0",
"@ngrx/component-store": "^16.3.0",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primeng": "^16.9.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"workbox-sw": "^7.0.0",
"workbox-window": "^7.0.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.2",
"@angular-eslint/builder": "16.2.0",
"@angular-eslint/eslint-plugin": "16.2.0",
"@angular-eslint/eslint-plugin-template": "16.2.0",
"@angular-eslint/schematics": "16.2.0",
"@angular-eslint/template-parser": "16.2.0",
"@angular/cli": "~16.2.2",
"@angular/compiler-cli": "^16.2.12",
"@types/jasmine": "~4.3.0",
"@typescript-eslint/eslint-plugin": "5.62.0",
"@typescript-eslint/parser": "5.62.0",
"eslint": "^8.49.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"husky": "^8.0.0",
"jasmine-core": "~4.6.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",
"karma-junit-reporter": "^2.0.1",
"lint-staged": "^14.0.1",
"prettier": "^3.0.3",
"prettier-eslint": "^15.0.1",
"ts-loader": "^9.5.1",
"typescript": "~5.1.3",
"webpack-cli": "^5.1.4",
"workbox-cli": "^7.0.0"
}
}

Reproducer

No response

Angular version

16.2.12

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

The selection should continue to work no matter which dropdown item is selected.

[cetincakiroglu]

Hi,

Could you please share a stackblitz reproducer so we can identify the issue?

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[domsprung]

Here is the required Stackblitz: https://stackblitz.com/edit/github-2dcgac?file=src%2Fapp%2Fapp.component.ts

[cetincakiroglu]

Hi,

Component works as expected, you're using virtualScroll wrong. Code below will solve the issue.
You need to define virtualScrollItemSize to use virtualScroll.

<p-dropdown
  [options]="testItems[0].options"
  optionLabel="label"
  optionValue="value"
  (onChange)="onChange()"
  [virtualScroll]="true"
  [virtualScrollItemSize]="46"
>
</p-dropdown>