Primeng: Dropdown does not hide on Push ChangeDetection

Created on 9 Jan 2017  路  7Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] 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

Plunkr Case (Bug Reports)
http://plnkr.co/edit/rbQWTdX8EbVHfHvqu42E

Current behavior
Create a component that implements OnPush change detection strategy and use the primeng dropdown component within it. Click the dropdown to open the select list panel click outside the dropdown (and don't hover the mouse back inside the panel). The panel stays open and doesn't close.

Expected behavior
The panel should close.

Minimal reproduction of the problem with instructions
See steps above

What is the motivation / use case for changing the behavior?
I have components that require the performance benefits of OnPush that I'd like to also use the dropdown component within, but cannot due to this.

  • Angular version: 2.1.X

  • PrimeNG version: 1.0.1

  • Browser: All

  • Language: All

defect

Most helpful comment

Also, it would be great if OnPush change detection could be added to the roadmap for all primeng components.

All 7 comments

Also, it would be great if OnPush change detection could be added to the roadmap for all primeng components.

For anyone having the same problem, here's a quick and dirty hack to force Dropdown update with OnPush strategy:

Dropdown.prototype.originalHide = Dropdown.prototype.hide;
Dropdown.prototype.hide = function() {
    this.originalHide();
    this.cd.markForCheck();
};

Dropdown.prototype.originalUnbindDocumentClickListener = Dropdown.prototype.unbindDocumentClickListener;
Dropdown.prototype.unbindDocumentClickListener = function () {
    this.originalUnbindDocumentClickListener();
    this.cd.markForCheck();
};

@cagataycivici PR ready for review: https://github.com/primefaces/primeng/pull/2159/files

I've added a document:click listener, but prefer a solution from prime

@HostListener('document:click', ['$event'])
    public clickout(e: Event): void {
         this.cd.markForCheck();
    }

Duplicate of #1971, no? Let's discuss there.

https://github.com/primefaces/primeng/issues/1971

I see, this issue is different than the one we fixed. I've added the check to fix it. Thanks.

Can you re-open the issue until it's fixed? It would help prevent others logging a duplicate issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mitosandov picture mitosandov  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

philly-vanilly picture philly-vanilly  路  3Comments

just-paja picture just-paja  路  3Comments

Helayxa picture Helayxa  路  3Comments