Table - Column Filters do not close when clicking outside and ChangeDetectionStrategy.OnPush

[SebastienLemayeur]

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Multiple similar issues for other components like #2803 #7694
Forum

Minimal reproduction of the problem with instructions
Add filters to a column and set changedetectionstrategy to onpush
Click on a filter
Click next to the pop up menu
-> menu does not close

• Angular version: 12.2.2

• PrimeNG version: 12.1.0

[jaroban]

As a workaround, you can do this:

ColumnFilter.prototype.hide = function () {
    this.overlayVisible = false;
    this.dt.cd.markForCheck();
};

[panayotZhaltov]

Hey, is there a fix for the issue already?

If no, how can I use the workaround @jaroban

As a workaround, you can do this:

ColumnFilter.prototype.hide = function () {
    this.overlayVisible = false;
    this.dt.cd.markForCheck();
};

[t4professor]

Here is my solution, hope it helps you

just declare in SharedModule or your Features module and enjoy

/**
 * Fix issue p-columnFilter isn't hide overlay correctly if parent component use ChangeDetectionStrategy.OnPush
 */
@Directive({
    selector: 'p-columnFilter',
})
export class ColumnFilterDirective {
    constructor(@Host() @Self() @Optional() public filter: ColumnFilter) {
        filter.hide = (): void => {
            filter.overlayVisible = false;
            filter.dt.cd.markForCheck();
        };
    }
}

[Anuj170122]

onSelectCLick(){
ColumnFilter.prototype.Content= function () {
this.overlayVisible = false;
this.dt.cd.markForCheck();
};
}

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[sladutska-incomm]

Hi
It looks like in v14.2.1 the issue is still reproduced.

[cetincakiroglu]

Hi,

Couldn't replicate the issue with v15 or v14.2.2. If the issue still exist please feel free to re-open by providing a Stackblitz example by using PrimeNG Issue Template

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[sladutska-incomm]

Hi @cetincakiroglu

The issue is still in v15.0.1
Here is example

[floralbxhh]

Hi @cetincakiroglu

The issue is still in v15.0.1 Here is example

Yes, I confirm that this problem exists with v15.0.1 also.

[Joroooo]

Still exists in 2024
the above solutions do not work
"primeng": "~16.5.1",
"@angular/core": "^16.2.0",

[Joroooo]

working in primeng 13
https://stackblitz.com/edit/primeng-tablefilter-demo?file=package.json

not working on future versions
https://stackblitz.com/edit/primeng-tablefilter-demo-cgdpzk?file=package.json

[ninjavis]

For me, in Angular 15 and PrimeNG 15.3.0 it worked.
I could open a column filter and when I click outside, it would close the filter popup.

Now with Angular 17.3.1 and PrimeNG 17.12.0 it no longer closes for outside click.