p-dropdown: Cannot clear dropdown programmatically

[qnguyen100]

Describe the bug

When using p-dropdown where [editable]="true" and showClear="true", cannot clear dropdown programmatically by setting selectedCity to null. See below. This works properly in primeng 16.9.3-lts but not 17.3.2.

<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.2",
"zone.js": "0.14.3",
"chart.js": "3.9.1",
"primeflex": "3.3.1",
"primeicons": "6.0.1",
"@types/node": "12.20.55",
"@angular/cdk": "16.2.13",
"@angular/core": "17.0.9",
"@angular/forms": "17.0.9",
"@types/jasmine": "4.3.1",
"@angular/common": "17.0.9",
"@angular/router": "17.0.9",
"@angular/compiler": "17.0.9",
"@angular/animations": "17.0.9",
"@angular/platform-browser": "17.0.9",
"@angular/platform-browser-dynamic": "17.0.9"
}

Reproducer

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

Angular version

17.0.9

PrimeNG version

17.3.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

1. Select city in dropdown
2. Click "Clear dropdown" button which nulls the model but does not clear the dropdown.

Expected behavior

Clicking "Clear dropdown" button should clear the dropdown.

[mertsincan]

Interesting! I added a milestone for it. We'll check it before the milestone is released.