Primeng: ColumnFilter: add option to filter instantly (without pressing Enter)

[Timmeeeey]

I'm submitting a ...

[ ] bug report
[x] feature request
[ ] support request

Current behavior
Currently you have to press Enter to apply the filter.

What is the motivation / use case for changing the behavior?
I think that pressing Enter to apply the filter is an unnecessary step.
It should rather be like the global filter which doesn't need Enter to be pressed.

[Cito]

This bothers me as well.

When you go to the table filter demo of v9, and enter some characters into the "Vin" filter input, the filter is applied as you type, which is very handy.

When you go to the table filter demo of v11 (current), and type some characters into the "Name" filter of the "Filter Row" example, then the filter is only applied when you click the filter symbol next to it and select a match mode. That's not only less inconvenient. It is also misleading because as soon as you start typing, the filter icon gets highlighted, which looks like this column filter is now active. But it isn't, and from looking at the filter row you don't know which of the filters are already activated and which are not.

The problematic code in PrimeNG 11 is in these lines in table.ts:

    onModelChange(value: any) {
        this.filterConstraint.value = value;

        if (this.type === 'boolean' || value === '') {
            this.dt._filter();
        }
    }

    onTextInputEnterKeyDown(event: KeyboardEvent) {
        this.dt._filter();
        event.preventDefault();
    }

    onNumericInputKeyDown(event: KeyboardEvent) {
        if (event.key === 'Enter') {
            this.dt._filter();
            event.preventDefault();
        }
    }

So, if you delete a text input or alter a boolean filter, then this will reflect instantenously. The filter is also applied when you press Enter. But when you just keep typing in a text or numeric input, the filter is not applied.

I think this behavior should at least be made configurable, maybe with an attribute directive of p-columnFilter.

To make it a bit more performant and smooth the filter input should of course be debounced when making it instant.

[Cito]

I found that all of the filters work just great when I remove that if condition in onModelChange() above so that the dt._filter() is executed on every change. That should be really made an option and enabled by default!

[danielweil]

Does anyone know a workaround for this?

[robivictor]

I would love to see this feature implemented too, as a matter of fact it would be nice if it is the default behavior.

[robivictor]

Here is how I came up with a solution for this after some research, I didn't find this in the docs. By using a template inside the p-columnFilter tag, you will have the control to tap to any event and trigger the internal call back function named 'filterCallback'.

• [ ] Make sure you use let-value and let-filter
• [ ] let-anything can replace let-filter, just be sure you use 'anything' for the method that captures the input event.
• [ ] If you want to clear filter and filter key word on table.reset, you need the let-value and ngModel to be defined, otherwise the the filter key stays in the the text box even if u reset the fiotering.

You don't need to define the filter() method in your controller, this works just as it is, as let-filter(let-anything) forces the internal filter call back method to take effect.
```html


pInputText
[ngModel]="value"
(ngModelChange)="filter($event)"
class="p-inputtext"
placeholder="search">

[Cito]

Thank you @robivictor, yes, this can be used as a workaround.

However, this means that we cannot use the builtin filter controls for standard types, specified with the type attribute, and must always use custom filter elements with templating which makes the data table templates very bloated. I'd really prefer to use the built-in filter controls, just with the possibility (or best default behavior) of auto-updating.

@yigitfindikli, can we get some feedback from developers whether it is considered to change this?