p-dropdown: Cannot clear dropdown value

[qnguyen100]

Describe the bug

When using p-dropdown where [editable]="true" and showClear="true", clicking the X to clear the selected value from dropdown does not work:

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" [editable]="true" optionLabel="name" showClear="true">

Environment

"dependencies": {
"rxjs": "7.8.1",
"quill": "1.3.7",
"tslib": "2.6.2",
"primeng": "17.3.1",
"zone.js": "0.14.2",
"chart.js": "3.9.1",
"primeflex": "3.3.1",
"primeicons": "6.0.1",
"@types/node": "12.20.55",
"@angular/cdk": "16.2.12",
"@angular/core": "17.0.8",
"@angular/forms": "17.0.8",
"@types/jasmine": "4.3.1",
"@angular/common": "17.0.8",
"@angular/router": "17.0.8",
"@angular/compiler": "17.0.8",
"@angular/animations": "17.0.8",
"@angular/platform-browser": "17.0.8",
"@angular/platform-browser-dynamic": "17.0.8"
}

Reproducer

https://stackblitz.com/edit/github-twhfy7?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Angular version

17.0.8

PrimeNG version

17.3.1

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

1. Select a value from dropdown
2. Clicking on X does not clear value from dropdown.

Expected behavior

Clicking on X should clear value from dropdown.