Table Column Filter dialog's dropdowns are incorrectly displaying selected value verses selected label

[rosenthalj]

Describe the bug

Table Column Filter dialog's "operator" dropdown and "matchmode" dropdown are displaying the selected "value" verses selected "label"

This change was induced with the dropdown accessibility changes

The first screenshot is from the v16.7.1 table filter demo and demonstrates the problem.

The second screenshot is from the v15-lts table filter demo and demonstrates the proper functionality

I investigated the issue and believe that the issue is caused by the dropdown.ts computed label method. The following fixes the problem for the Table Filters, but I am not sure this is the correct overall fix (that is why I did not submit a pull request):

Environment

mac os and windows

Reproducer

https://primeng.org/table#filter

Angular version

16.x

PrimeNG version

16.7.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.1

Browser(s)

safari, chrome, firefox

Steps to reproduce the behavior

1. Go to the Table Filter demo: https://primeng.org/table#filter
2. Click on the Name's column filter icon
3. Filters' dropdowns will incorrectly display the selected values verses label values: "and", "startsWith"

Expected behavior

Filters' dropdowns should display the selected labels: "Match All", "Starts with"

[chainsaws-dev]

I also noticed that problem in latest versions and since there is a lot of tables with filters in my projects it is a very noticable bug!

[tmc101]

This is happening with all dropdowns since I updated to 16.7.1.

It looks like the p-dropdown optionLabel default changed from 'label' to null between 15 and 16:

15.4.11:

16.7.1:

This is obviously a breaking change, but there is no mention of this in the changelog:

https://github.com/primefaces/primeng/blob/master/CHANGELOG.md

[rosenthalj]

Regardless of whether or not the default value for p-dropdown optionLabel has changed, this is a problem. When you modify Table.ts source code to set optionLabel='label' the functionality is still broken. I still believe I have identified the root cause of the problem in the screenshot I provided in the original comment.

option

[rosenthalj]

I submitted a pull request(#14080) to fix this issue and issue #14054

[stevenpotts]

This could be what I am seeing too?
I just upgraded from a v15 version to 16.7.2 including angular, and when I select a value i get this

the items appear, and i can click them but the labelValue doesnt seem to update. now we are loading the options from the server, so its a bit more complex, however it works fine previously.

<p-dropdown id="validationTemplate" placeholder="Select Template" [options]="validationTemplates" optionValue="importTemplateId" optionLabel="importTemplate" [(ngModel)]="validateTemplate.importTemplateId" (onChange)="setTemplate($event.value)"></p-dropdown>

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!