Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

p-dropdown: FilterBy multiple values is not working #14492

Closed
jalley3 opened this issue Jan 5, 2024 · 2 comments · Fixed by #14504
Closed

p-dropdown: FilterBy multiple values is not working #14492

jalley3 opened this issue Jan 5, 2024 · 2 comments · Fixed by #14504
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@jalley3
Copy link

jalley3 commented Jan 5, 2024

Describe the bug

This was previously working. However since upgrading to 17.2.0 the filterBy property seems to be ignored and the optionLabel field is the only one that gets searched.

Here is an image of the stackblitz that demonstrates the issue:
image
image

Note filterBy is set to filter by code and name but only name gets searched (and name is the value that is in the OptionLabel attribute).

Here is the dropdown code:

<p-dropdown
    [options]="countries"
    [(ngModel)]="selectedCountry"
    optionLabel="name"
    [filter]="true"
    filterBy="name,code"
    [showClear]="true"
    placeholder="Select a Country"
  >
    <ng-template pTemplate="selectedItem">
      <div class="flex align-items-center gap-2" *ngIf="selectedCountry">
        <img
          src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
          [class]="'flag flag-' + selectedCountry.code.toLowerCase()"
          style="width: 18px"
        />
        <div>{{ selectedCountry.name }}</div>
      </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
      <div class="flex align-items-center gap-2">
        <div> {{country.code}} </div>
        <div>{{ country.name }}</div>
      </div>
    </ng-template>
  </p-dropdown>

Here is the link to the stackblitz: https://stackblitz.com/edit/1n452r?file=src%2Fapp%2Fdemo%2Fdropdown-filter-demo.html

Environment

Im using 17.2.0 but in the stackblitz above it is 17.3.1 and still the same issue.

Reproducer

https://stackblitz.com/edit/1n452r?file=src%2Fapp%2Fdemo%2Fdropdown-filter-demo.html,package.json

Angular version

17.0.7

PrimeNG version

17.2.0

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

20.10

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

As per the API, and the way that the component previously functioned, the filterBy attribute should allow you to specify multiple values to filter the dropdown by

@jalley3 jalley3 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 5, 2024
@jalley3
Copy link
Author

jalley3 commented Jan 7, 2024

Also just to provide a little more information, the order i put them in does not play a factor in the filtering, i think the property is being ignored all together because it is only ever the value that is the option label that gets searched.

@yassine-fy94
Copy link

add the filterFields on your html p-dropdown :
[filterFields] ="['name','code']"

@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 10, 2024
cetincakiroglu added a commit that referenced this issue Jan 10, 2024
Fixed #14492 - Dropdown |  FilterBy multiple values is not working
@cetincakiroglu cetincakiroglu added LTS-PORTABLE Issue's fix will be ported to supported LTS versions LTS-16-PORTABLE and removed LTS-PORTABLE Issue's fix will be ported to supported LTS versions labels Jan 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants