Table: ColumnFilter is applied on enter but not on click outside

[puschie286]

Describe the bug

ColumnFilter applies the filter on enter - but not on click outside. In both cases is the filter value saved and visually applied.

This results in an invalid visual state: ( Pressing ESC results in the same invalid state )

Same behavior for display row and menu.

Environment

Tested on documentation page

Reproducer

https://primeng.org/table#filter

Angular version

17.3.2

PrimeNG version

17.18.7

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.12.2

Browser(s)

Chrome

Steps to reproduce the behavior

1. Enter value into text filter (display=row)
2. Click outside of filter
3. See visually applied filter but no change in table content

Expected behavior

For display row or menu (when showButtons = false or showApplyButton = false ):

1. Enter value into text filter
2. Click outside of filter
3. Filter is applied OR Filter value is discarded ( i think applying is more what the user expect )

[puschie286]

note: if you delete your filter value (clear the input), its immediately applied (so its behave different than entering)

Suggestions: filter is only applied on focus lost (regardless if you enter or delete the value). Addition: Option to only apply on Enter and discard filter changes on focus lost

[AStoker]

Just hit this in the latest 19.x version as well. Kind of an annoying UX issue. Probably going to just get around it by manually templating out the input and use the binding to set the value like I want.

[AStoker]

Also, looks related to this: https://github.com/primefaces/primeng/issues/9581