MultiSelect filter not working

[buddyackerman]

I upgraded to version 18.0.2 (as part of an Angular 18 upgrade) recently and all but one of the multiselects in my app are filtering now. I'm not really asking for a solution as I'm not going to be able to create a stackblitz to demonstrate the issue because this is part of a very large application. I'll post the component configuration that I'm using but I doubt that will help. I'm really just looking for a way to debug the PrimeNG code to find out what's happening on filter.

        <p-multiSelect
          #columnMultiSelect
          id="columnsFilter"
          defaultLabel="Select Columns"
          autofocusFilter="true"
          [filter]="true"
          filterBy="header,field"
          optionLabel="header"
          selectedItemsLabel="{0} columns selected"
          [options]="allColumns"
          [(ngModel)]="selectedColumns"
          (onChange)="onColumnsChange()"
          (onPanelHide)="onColumnsChange()"
        >
        </p-multiSelect>

This is running in Chrome, I can still run the old code and it still works so it's not a browser version issue. The previous version was app version is v16.

I've tried adding the filter property, I've added a filterBy property but that didn't help. I tried adding the filterMatchMode property to no affect. The one and only multiselect that's working is being used in the filter column of a table header and it uses the filterBy with two fields specified. I was really surprised that adding the filterBy to my other multiselects had no affect. Below is the component config for the working multiselect. This one has an item template and the ones that don't work don't have a template anymore since it's not needed. I tried adding a simple one back but it didn't make any difference.

                  <p-multiSelect
                    #groupsFilter
                    autofocusFilter="true"
                    id="groupsFilter"
                    defaultLabel="Select Groups"
                    [filter]="true"
                    optionLabel="GroupName"
                    selectedItemsLabel="{0} Groups Selected"
                    filterBy="GroupName,SupportCenter.SupportCenterName"
                    [maxSelectedLabels]="1"
                    [options]="groups"
                    [(ngModel)]="selectedGroups"
                    (onChange)="onGroupFilterChanged($event)"
                  >
                    <ng-template let-selectedItem pTemplate="selectedItem">
                      <div class="group-selectedItem" *ngIf="selectedItem">
                        {{
                          selectedItem.GroupId === 0
                            ? selectedItem.GroupName
                            : selectedItem.GroupName +
                              ' | ' +
                              selectedItem.SupportCenter.SupportCenterName
                        }}
                      </div>
                    </ng-template>
                    <ng-template let-item pTemplate="item">
                      {{
                        item.GroupId === 0
                          ? item.GroupName
                          : item.GroupName +
                            ' | ' +
                            item.SupportCenter.SupportCenterName
                      }}
                    </ng-template>
                  </p-multiSelect>

There were no new libraries added to the app during upgrade only upgrading to get compatible versions. We are using Angular Material along CDK v18. Below is a list of the dependencies of the app:

"dependencies": {
"@angular/animations": "^18.2.13",
"@angular/cdk": "^18.2.14",
"@angular/common": "^18.2.13",
"@angular/compiler": "^18.2.13",
"@angular/core": "^18.2.13",
"@angular/forms": "^18.2.13",
"@angular/material": "^18.2.14",
"@angular/material-moment-adapter": "^18.2.14",
"@angular/platform-browser": "^18.2.13",
"@angular/platform-browser-dynamic": "^18.2.13",
"@angular/router": "^18.2.13",
"@angular/service-worker": "^18.2.13",
"@azure/app-configuration": "^1.3.1",
"@azure/msal-angular": "^4.0.4",
"@azure/msal-browser": "^4.2.0",
"@fortawesome/fontawesome-free": "^5.15.4",
"@fullcalendar/core": "^5.10.1",
"@mdi/font": "^7.2.96",
"@microsoft/applicationinsights-web": "^2.7.2",
"@microsoft/signalr": "^7.0.3",
"@ngxs/devtools-plugin": "^18.1.6",
"@ngxs/form-plugin": "^18.1.6",
"@ngxs/logger-plugin": "^18.1.6",
"@ngxs/router-plugin": "^18.1.6",
"@ngxs/storage-plugin": "^18.1.6",
"@ngxs/store": "^18.1.6",
"@primeng/themes": "^19.0.6",
"angular-eslint": "^18.4.3",
"chart.js": "^3.7.0",
"core-js": "^3.20.3",
"date-fns": "^2.28.0",
"date-fns-tz": "^2.0.1",
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",

"linq-collections": "^1.0.254",
"moment": "^2.29.4",
"primeicons": "^7.0.0",
"primeng": "^18.0.2",
"quill": "^1.3.7",
"rxjs": "~7.8.0",
"tslib": "^2.8.1",
"turndown": "^7.2.0",
"zone.js": "~0.14.0"

},

Here's a video of it not working

Screen.Recording.2025-03-07.120001.mp4