p-dropdown

[pierocox09]

Describe the bug

p-dropdown does not show the optionlabel but does take it when selecting the optionvalue

env

{ "name": "primeng-dropdown-reactive-forms-demo", "description": "PrimeNG DropdownReactiveFormsDemo", "license": "MIT", "keywords": [], "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test" }, "dependencies": { "primeng": "16.7.1", "@angular-devkit/build-angular": "^16.2.0", "@angular-eslint/eslint-plugin": "16.1.0", "@angular-eslint/eslint-plugin-template": "16.1.0", "@angular-eslint/schematics": "16.1.0", "@angular-eslint/template-parser": "16.1.0", "@angular/animations": "^16.2.0", "@angular/cdk": "^16.2.0", "@angular/cli": "^16.2.0", "@angular/common": "^16.2.0", "@angular/compiler": "^16.2.0", "@angular/compiler-cli": "^16.2.0", "@angular/core": "^16.2.0", "@angular/forms": "^16.2.0", "@angular/platform-browser": "^16.2.0", "@angular/platform-browser-dynamic": "^16.2.0", "@angular/platform-server": "^16.2.0", "@angular/router": "^16.2.0", "@nguniversal/builders": "^16.1.3", "@nguniversal/common": "^16.1.3", "@nguniversal/express-engine": "^16.1.3", "@types/express": "^4.17.17", "@types/jasmine": "~4.3.1", "@types/jest": "^29.5.1", "@types/node": "^12.20.55", "@typescript-eslint/eslint-plugin": "^6.6.0", "chart.js": "3.3.2", "codelyzer": "^0.0.28", "domino": "^2.1.6", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-import": "latest", "eslint-plugin-jsdoc": "latest", "eslint-plugin-prefer-arrow": "latest", "express": "^4.18.2", "file-saver": "^2.0.5", "karma": "~6.4.2", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "ng-packagr": "^16.2.0", "prettier": "2.8.8", "primeflex": "^3.3.0", "primeicons": "^6.0.1", "quill": "1.3.7", "rxjs": "~7.8.1", "ts-node": "~8.3.0", "tslib": "^2.5.0", "typedoc": "0.24.7", "typescript": "5.0.4", "xlsx": "^0.18.5", "zone.js": "~0.13.0" } }

Reproducer

https://stackblitz.com/edit/ceib6d?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html

Angular version

16.7.1

PrimeNG version

16.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[Shiying-Li]

I am also meeting the same problem with "primeng": "16.7.2",

[rosenthalj]

This issue is the root cause for issue #14055 : Table Column Filter dialog's dropdowns are incorrectly displaying selected value verses selected label.

My proposed fix in issue #14055 had to be slightly modified to also fix the Reproducer you supplied for this bug. The Video listed below is running this issue's reproducer with my updated proposed change.

https://github.com/primefaces/primeng/assets/45439491/84bcc92b-85e8-4f89-8067-1243b28592c0

Listed below is my updated proposed change. Once again I am not submitting a pull request because I'm not sure this is the best overall solution.

@SoyDiego - Could you take a look at these proposed changes and even submit a pull request if you feel confident?

[estebanluengo]

Hi, not only that but p-dropdown is firing a change event once is rendered by Angular. Simply add (onChange)=changeValue(event$) to this example https://stackblitz.com/edit/ceib6d?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html
Previous versions of primeNg didn't fire this event unless you selected a different value from the dropdown.

[pete-mcwilliams]

Hi, not only that but p-dropdown is firing a change event once is rendered by Angular. Simply add (onChange)=changeValue(event$) to this example https://stackblitz.com/edit/ceib6d?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html Previous versions of primeNg didn't fire this event unless you selected a different value from the dropdown.

raised separate issue for this #14095