I'm submitting a ...
[ 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
Plunkr Case (Bug Reports)
https://plnkr.co/edit/MaKQWDlNI774B3PKWic9
Current behavior
Whenever I insert a p-calendar into any of my pages/components, the onSelect event won't trigger. I can see that the form css classes lose the pristine state on the first click, but the input never changes, the bound model value doesn't change, and I need to click a second time to get the onSelect event to fire and get the model to update (I'm not updating the model on the onSelect, just noticing the changes that happen on 1st vs 2nd click).
The onFocus event, however, works flawlessly.
Expected behavior
A single click would be required to fire the onSelect event and get the bound model to change
Minimal reproduction of the problem with instructions
https://plnkr.co/edit/MaKQWDlNI774B3PKWic9
(somehow I can't make that work too, get's stuck at loading...)
Also reported on the forum on Monday: https://forum.primefaces.org/viewtopic.php?f=35&t=50090
What is the motivation / use case for changing the behavior?
This calendar is inside a shared component that gets reused on some parts of my application. I've also tried to place a p-calendar directly in the page I want to use my shared component and it also requires a second click
Please tell us about your environment:
Server: lite-server
IDE: Visual Studio Code
Node v6.7.0
Angular version: 2.4.5
PrimeNG version: 2.0.5
Also reproducible on 2.0.4 and 2.0.0. Haven't tested prior versions.
Browser: all
Language: TypeScript 2.2.1
Node (for AoT issues): v6.7.0
Please provide a test case at;
Found the same double click behaviour as described above when using the PrimenG Calendar.
Angular version: 4.0.0
PrimeNG version: 4.0.0-rc1
Browser: chrome
Language: TypeScript 2.2.0
My situation was where I had a moment object e.g. dateOne and I converted it to Date object on the template side. In HTML I was using:
[minDate]="dateOne.toDate()" - dateOne is type moment.Moment
[maxDate]="dateTwo.toDate()"
Fixed the issue by converting the moment to a Date object on the ts side and using them as is.
[minDate]="dateOne" - dateOne is type Date
[maxDate]="dateTwo"
I can confirm that this was indeed the fix. I had my [minDate] bound to a function returning a Moment.(...).toDate().
As soon as I declared a component variable of type Date and assigned that variable to [minDate] everything started working accordingly.
Glad to hear.
Most helpful comment
Found the same double click behaviour as described above when using the PrimenG Calendar.
Angular version: 4.0.0
PrimeNG version: 4.0.0-rc1
Browser: chrome
Language: TypeScript 2.2.0
My situation was where I had a moment object e.g. dateOne and I converted it to Date object on the template side. In HTML I was using:
[minDate]="dateOne.toDate()" - dateOne is type moment.Moment
[maxDate]="dateTwo.toDate()"
Fixed the issue by converting the moment to a Date object on the ts side and using them as is.
[minDate]="dateOne" - dateOne is type Date
[maxDate]="dateTwo"