Calendar overlay difficult to hide

[sliekens]

I use a Calendar input with overlay to act as a filter for a DataTable column. In pseudo selector terms:

Code: Select all

p-dataTable > template pTemplate="filter" > p-calendar

I have a problem with this setup: when the calendar overlay is open, clicking outside the overlay does not hide the calendar on the first click. It consistently takes me two clicks outside the overlay (and input field) to close the overlay.

Angular version: 2.4.8
PrimeNG version: 2.0.1

Is this a known issue? If not, can someone explain how Calendar attaches behaviors to clicks outside its component so that I can better diagnose what's wrong in my app?

UPDATE
Scroll down for updated information or click viewtopic.php?p=155332#p155332

[cagatay.civici]

Can you replicate it at showcase?

[sliekens]

My issue does not occur in its entirety in a simple Plunkr.
http://plnkr.co/edit/BFJ6UV4eaUThjBivBzjP?p=preview

It is a little noticable: when you click the text input under 'Year' to open the overlay, the overlay is not closed when you click any of the text input fields in any of the other columns. In my app, I get that behavior with any element.

Since this issue seems to be specific to my app, I guess my app is interfering with the normal propagation of click events.

How does the calendar component listen for clicks outside the overlay? Does it attach a handler for click events that bubble up to the document body/root?

If something in my app stops click events from bubbling, would that be a possible explanation for why the calendar overlay is not closed?

[sliekens]

bump

[sliekens]

Well we figured out what is causing it. We use p-calendar inside a component that uses ChangeDetectionStrategy.OnPush. The overlay does not properly handle clicks unless we change to ChangeDetectionStrategy.Default.

Minimal repro
http://plnkr.co/edit/BFJ6UV4eaUThjBivBzjP?p=preview

1. Click on the input field under 'Year'
2. Try to dismiss the calendar overlay by clicking once outside the overlay
3. Observe that the input field has now lost focus but the overlay is still shown.

So now what?

PS: I noticed that this does not occur in version 4.0.0-rc.2 or 4.0.0-rc.3 but we are still on the 2.x.x branch and we're not prepared to update to a pre-release version to get this fix.