Hovering on timepicker arrows acting like select after clicking an arrow in the time picker

[dck5132]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review
Without PRO Support: ~8-12 weeks.
With PRO Support: 1 hour

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

[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)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewed in detail and assisted.

https://stackblitz.com/edit/primeng-calendar-show-time-mouseout-issue-k4v3hw

Current behavior
On a calendar with a time picker once you select a time by clicking on one of the time picker arrows it then begins to select a value when the user hovers over any of the time picker arrows.

Expected behavior
On a calendar with a timepicker once you select a time by clicking on one of the time picker arrows it will then not select a value when a user hovers one of the time picker arrows

Minimal reproduction of the problem with instructions

1. Click on any one of the time picker arrows in the provided stackblitz https://stackblitz.com/edit/primeng-calendar-show-time-mouseout-issue-k4v3hw - this will result in the counter displaying 1 change which is fine.
2. Hover over any one of the time picker arrows - this will result in the counter displaying 2 or more which is not expected as when the user is hovering over a time picker arrow it should not act as a select event.

** Alternative **
This can also be replicated on the primeng website https://primefaces.org/primeng/#/calendar

1. Select the example calendar for time
   
2. Select any one of the time picker arrows.
3. Delete the input for time picker input field.
4. Hover mouse cursor over one of the time picker arrows
   
   What is the motivation / use case for changing the behavior?
   Hovering on any time picker arrow after selecting any of the time picker arrows once should not act as if the user selected it via click event. This is related to a previous ticket where hte issue was mitigated but not resolved Hovering on timepicker arrows acting like select #8584

Please tell us about your environment:
Windows 10, NPM, VS Code/Stackblitz.

• Angular version: 5.X
  9.1.3

• PrimeNG version: 5.X
  9.1.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome Latest, Firefox Latest, IE Latest

• Language: [TypeScript3.7.5]

• Node (for AoT issues): node --version = 12.3.1

[chamgda]

This bug also causes validators to fire several times a second if you use the component in a reactive form.
This renders the timepicker completely unusable if you want to utilize async validators.

[dck5132]

Just want to update that this is also reproducible on primeng v10 - can be seen in the website following the same steps as on v9 where it is still an issue

[pekevski]

The calendar component implementation listens to a button "mouseout" event on the time picker buttons. When fired, the time is updated.

an example: in calendar.ts

<button class="p-link" type="button" 
    (keydown)="onContainerButtonKeydown($event)" 
    (keydown.enter)="incrementHour($event)" 
    (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" 
    (mouseup)="onTimePickerElementMouseUp($event)" 
    (mouseout)="onTimePickerElementMouseOut($event)" 
    pRipple
>
    <span class="pi pi-chevron-up"></span>
</button>

The event fired updates the time and emits the model like so:

onTimePickerElementMouseOut(event: Event) {
    if (!this.disabled && this.timePickerTimer) {
        this.clearTimePickerTimer();
        this.updateTime();
    }
}