PrimeNG table filtering and sorting on each column doesn't work

0
votes

I'm creating a table using PrimeNG. I want to allow the user to sort AND filter by column. I can successfully sort, but when I try to type in the filter text input of any column, the input loses focus and the column gets sorted. I've debugged a little and it seems like the sorting functionality of primeNG is activated whenever a click is captured in the header of the table. Since my filter input is inside the header, when I try to click on it to start typing, it activates the sort and I lose focus.

Stackblitz reproduction: https://stackblitz.com/edit/primeng-table-g9uxkf

Any idea on how I could counter this?

Thank you in advance.

2
angularprimeng
Can you enable the stackblitz to fork please. – Ragavan Rajan
can you update your question with some code and enable the stackblitz – Happy Coder
How do I enable the stackblitz? I changed the link, maybe now you can fork? – Tecnogirl

2 Answers

0
votes

What I ended up doing was capturing the click event on the text input (the filter) and stopping its propagation.

clickOnFilter(event: Event) {
    event.stopPropagation();
}
0
votes

Adding this to the input tag helped me to resolve the issue.. Now Search is also working and sorting is also working

(click)="$event.stopPropagation()"

or

<input pInputText type="text" (click)="$event.stopPropagation()" (input)="dt1.filter($event.target.value, col.field, col.filterMatchMode)" [value]="dt1.filters[col.field]?.value">