Component: Dropdown Filter Bug in primeng v16.9.1: Default Key Label and Value Triggering Error on Search

[anieshvishnu]

Describe the bug

Dropdown option having default key label and value and when we search using built in Filter getting this error it was working fine in "primeng": "16.4.1"

ERROR TypeError: option.toLowerCase is not a function
    at vendor.js:144698:128
    at Array.filter (<anonymous>)
    at Object.computation (vendor.js:144698:104)
    at Object.producerRecomputeValue (vendor.js:67992:25)
    at producerUpdateValueVersion (vendor.js:67747:8)
    at consumerPollProducersForChange (vendor.js:67837:5)
    at Object.run (vendor.js:68131:25)
    at vendor.js:78251:30
    at _ZoneDelegate.invoke (polyfills.js:8244:158)
    at Object.onInvoke (vendor.js:76112:25) 

Stackblitz url: https://stackblitz.com/edit/cmsabp?file=src%2Fapp%2Fdemo%2Fdropdown-filter-demo.ts

Environment

{ "name": "primeng-dropdown-filter-demo", "description": "PrimeNG DropdownFilterDemo", "license": "MIT", "keywords": [], "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test" }, "dependencies": { "primeng": "16.9.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/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/cmsabp?file=src%2Fapp%2Fdemo%2Fdropdown-filter-demo.ts

Angular version

16.2.0

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

not sure

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[sshanmugam-baron]

I am having the same problem.

[ralscha]

Bug also occurrs in 17.1.0

[Kombuchelada]

I am running into this after attempting to upgrade our app to Angular 17, and moving PrimeNG up to 17 as well.

[psyllidou]

I have also the same problem in my application. If you use FilterBy property, the problem is solved.

[sshanmugam-baron]

Thanks, I was also able to fix the issue by using filterBy, optionLabel & optionValue. You need to use OptionValue if you are setting the selected item by value.

[jtaub]

Angular noob here. Would anyone be so kind as to provide a concrete example of how exactly to use filterBy to work around this issue? I'm using all three: filterBy, optionLabel, and optionValue, but I still get the same error as without any of them.

---

Never mind, got it. Assuming your options are SelectItems,

[filter]="true"
[filterBy]="'label'"
[optionLabel]="'label'"
[optionValue]="'value'"

[Torquin]

It seems that [optionLabel] and [optionValue] default to null now instead of respectively 'label' and 'value' in older versions. Does this mean we have to go over all our dropdowns and specify these properties ?

[urielzen]

@Torquin I just tested removing the explicit attributes [optionLabel] and [optionValue] using the latest version 17.3.2 and it worked for me without problems.