Component: Dropdown (FilterBy is not working)

[yassine-fy94]

Describe the bug

This my html code :
<p-dropdown optionLabel="label" optionValue="value" [autoDisplayFirst]="false" [resetFilterOnHide]="true" [showClear]="true"
scrollHeight="110px" appendTo="body" [options]="liste_articles" formControlName="id_article"
[filter]="generalService.innerWidth<992 ? false :true" placeholder="..."
emptyFilterMessage="..." emptyMessage="..." class="ng-dirty"
filterBy="label,code_barres_article,libelle_catagorie" [virtualScroll]="true"
[virtualScrollItemSize]="38">

{{element?.label}}

({{element?.code_barres_article}})


{{element?.libelle_catagorie}}

This is my list :

[
{
"value": 19,
"label": "30",
"code_barres_article": "99851851",
"first_image_article": "optique_boutique_db_one_2023_12_17_21_56_03_03_article_id_19.jpeg",
"id_categorie": 1,
"libelle_catagorie": "Montures de vue"
},
{
"value": 8,
"label": "Air Optix Colors",
"code_barres_article": "99770705",
"first_image_article": null,
"id_categorie": 3,
"libelle_catagorie": "Lentilles de contact"
},
{
"value": 2,
"label": "Article",
"code_barres_article": "991234",
"first_image_article": null,
"id_categorie": 1,
"libelle_catagorie": "Montures de vue"
},
{
"value": 3,
"label": "Article 3",
"code_barres_article": "99786738",
"first_image_article": null,
"id_categorie": 2,
"libelle_catagorie": "Lunettes solaire"
},
{
"value": 14,
"label": "Blink Intensive Tears 10ml",
"code_barres_article": "99738570",
"first_image_article": null,
"id_categorie": 5,
"libelle_catagorie": "Produits d'entretien"
},
{
"value": 7,
"label": "DAILIES FRESHLOOK ILLUMINATE 10L",
"code_barres_article": "99368136",
"first_image_article": null,
"id_categorie": 3,
"libelle_catagorie": "Lentilles de contact"
},
{
"value": 10,
"label": "Dailies Total 1 90 Pack",
"code_barres_article": "2394786",
"first_image_article": null,
"id_categorie": 3,
"libelle_catagorie": "Lentilles de contact"
},
{
"value": 13,
"label": "EasySept Solution - Single Pack",
"code_barres_article": "99198275",
"first_image_article": null,
"id_categorie": 5,
"libelle_catagorie": "Produits d'entretien"
},
{
"value": 16,
"label": "Lentilles 01",
"code_barres_article": "99716452",
"first_image_article": "optique_boutique_db_one_2023_12_17_21_56_15_15_article_id_16.jpeg",
"id_categorie": 3,
"libelle_catagorie": "Lentilles de contact"
},
{
"value": 15,
"label": "Lentilles 03",
"code_barres_article": "2378462",
"first_image_article": null,
"id_categorie": 3,
"libelle_catagorie": "Lentilles de contact"
},
{
"value": 5,
"label": "Lunettes 1",
"code_barres_article": "99909685",
"first_image_article": null,
"id_categorie": 2,
"libelle_catagorie": "Lunettes solaire"
},
{
"value": 6,
"label": "Lunettes 2",
"code_barres_article": "99207978",
"first_image_article": null,
"id_categorie": 2,
"libelle_catagorie": "Lunettes solaire"
},
{
"value": 11,
"label": "Lunettes de soleil Gucci GG0113S",
"code_barres_article": "99346200",
"first_image_article": null,
"id_categorie": 2,
"libelle_catagorie": "Lunettes solaire"
},
{
"value": 12,
"label": "Lunettes de vue Gucci",
"code_barres_article": "99711602",
"first_image_article": null,
"id_categorie": 1,
"libelle_catagorie": "Montures de vue"
},
{
"value": 4,
"label": "Produit 1",
"code_barres_article": "99114322",
"first_image_article": null,
"id_categorie": 5,
"libelle_catagorie": "Produits d'entretien"
},
{
"value": 9,
"label": "REFRESH Solution Multifonctions - Pack 3",
"code_barres_article": "99615543",
"first_image_article": null,
"id_categorie": 5,
"libelle_catagorie": "Produits d'entretien"
}
]
It was working fine on the 16 version

Environment

"dependencies": {
"@angular/animations": "^17.0.7",
"@angular/cdk": "^17.0.4",
"@angular/common": "^17.0.7",
"@angular/compiler": "^17.0.7",
"@angular/core": "^17.0.7",
"@angular/forms": "^17.0.7",
"@angular/platform-browser": "^17.0.7",
"@angular/platform-browser-dynamic": "^17.0.7",
"@angular/router": "^17.0.7",
"@types/crypto-js": "^4.1.1",
"bootstrap": "^5.3.0",
"crypto-browserify": "^3.12.0",
"crypto-js": "^4.1.1",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"jsbarcode": "^3.11.5",
"jwt-decode": "^4.0.0",
"ng-select2-component": "^13.0.9",
"ngx-barcode6": "^1.0.23",
"ngx-image-compress": "^15.1.5",
"onscan.js": "^1.5.2",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primeng": "^17.1.0",
"rxjs": "~7.8.0",
"save": "^2.9.0",
"sweetalert2": "^11.7.28",
"ts-evaluator": "^1.2.0",
"tslib": "^2.3.0",
"zone.js": "^0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.7",
"@angular/cli": "~17.0.7",
"@angular/compiler-cli": "^17.0.7",
"@types/file-saver": "^2.0.5",
"@types/jasmine": "~4.3.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.0.0",
"typescript": "^5.2.2"
}

Reproducer

No response

Angular version

17.0.7

PrimeNG version

17.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mati4455]

It looks that code is not fully updated. Based on logic as workaround you can use filterFields input instead.
So in your example:
replace
filterBy="label,code_barres_article,libelle_catagorie"
with
[filterFields]="['label', 'code_barres_article', 'libelle_categorie']"

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

[cetincakiroglu]

I am closing the issue since a reproducer is not provided.