Skip to content

Commit

Permalink
Fixed #8961 - Hovering on timepicker arrows acting like select after …
Browse files Browse the repository at this point in the history 
…clicking an arrow in the time picker
  • Loading branch information
@yigitfindikli
yigitfindikli committed Apr 19, 2021
1 parent b0c0f9d commit ade949c
Showing 1 changed file with 8 additions and 7 deletions.
15 changes: 8 additions & 7 deletions src/app/components/calendar/calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,35 +109,35 @@ export interface LocaleSettings {
</ng-container>
<div class="p-timepicker" *ngIf="showTime||timeOnly">
<div class="p-hour-picker">
<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>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
<span class="pi pi-chevron-up"></span>
</button>
<span><ng-container *ngIf="currentHour < 10">0</ng-container>{{currentHour}}</span>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseout)="onTimePickerElementMouseOut($event)" pRipple>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
<span class="pi pi-chevron-down"></span>
</button>
</div>
<div class="p-separator">
<span>{{timeSeparator}}</span>
</div>
<div class="p-minute-picker">
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseout)="onTimePickerElementMouseOut($event)" pRipple>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
<span class="pi pi-chevron-up"></span>
</button>
<span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{currentMinute}}</span>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseout)="onTimePickerElementMouseOut($event)" pRipple>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
<span class="pi pi-chevron-down"></span>
</button>
</div>
<div class="p-separator" *ngIf="showSeconds">
<span>{{timeSeparator}}</span>
</div>
<div class="p-second-picker" *ngIf="showSeconds">
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseout)="onTimePickerElementMouseOut($event)" pRipple>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
<span class="pi pi-chevron-up"></span>
</button>
<span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{currentSecond}}</span>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseout)="onTimePickerElementMouseOut($event)" pRipple>
<button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
<span class="pi pi-chevron-down"></span>
</button>
</div>
Expand Down Expand Up @@ -1714,7 +1714,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
}
}

onTimePickerElementMouseOut(event: Event) {
onTimePickerElementMouseLeave() {
if (!this.disabled && this.timePickerTimer) {
this.clearTimePickerTimer();
this.updateTime();
Expand Down Expand Up @@ -1759,6 +1759,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
clearTimePickerTimer() {
if (this.timePickerTimer) {
clearTimeout(this.timePickerTimer);
this.timePickerTimer = null;
}
}

Expand Down

1 comment on commit ade949c

@pekevski
Copy link

@pekevski pekevski commented on ade949c Apr 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello, just a comment - from memory with these changes, I believe the value in the input field won't update when clicking and holding the up or down arrow for a time-only calendar. Would that be a desirable user experience? If so, these changes are much cleaner 😄

Please sign in to comment.