From 0365984e939337793f612435e49012af6942f58d Mon Sep 17 00:00:00 2001 From: jackofdiamond5 Date: Fri, 14 Feb 2025 11:11:02 +0200 Subject: [PATCH 1/3] test(time-picker): ensure view does not reset when clicking am/pm (cherry picked from commit ec3b3e2c76fc03cc53e112998501d3129f39a517) (cherry picked from commit 9ff50ad31e59b2caf835a77b4ed3f05e68c69896) --- .../time-picker/time-picker.component.spec.ts | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 8d38ec7d4ad..1c7fb3ed6ef 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -936,7 +936,6 @@ describe('IgxTimePicker', () => { expect(document.activeElement.children[3].innerHTML.trim()).toBe('10'); }); - it('should navigate through items with arrow keys', () => { timePicker.itemsDelta = { hours: 4, minutes: 7, seconds: 1 }; fixture.detectChanges(); @@ -1086,6 +1085,47 @@ describe('IgxTimePicker', () => { expect(selectedMinutes).toEqual('00'); expect(selectedAMPM).toEqual('AM'); }); + + it('should not reset the time when clicking on AM/PM - GH#15158', fakeAsync(() => { + timePicker.itemsDelta = { hours: 1, minutes: 15, seconds: 1 }; + timePicker.mode = "dialog"; + + timePicker.open(); + fixture.detectChanges(); + + const amElement = ampmColumn.query(e => e.nativeElement.textContent === 'AM'); + const pmElement = ampmColumn.query(e => e.nativeElement.textContent === 'PM'); + + UIInteractions.simulateClickEvent(amElement.nativeElement); + fixture.detectChanges(); + + let selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); + let selectedHour = selectedItems[0].nativeElement.innerText; + let selectedMinutes = selectedItems[1].nativeElement.innerText; + let selectedAMPM = selectedItems[2].nativeElement.innerText; + + expect(selectedHour).toBe('11'); + expect(selectedMinutes).toEqual('45'); + expect(selectedAMPM).toEqual('AM'); + + UIInteractions.simulateClickEvent(pmElement.nativeElement); // move to the PM element + fixture.detectChanges(); + UIInteractions.simulateClickEvent(pmElement.nativeElement); // click again to reproduce the issue + fixture.detectChanges(); + + selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM)); + selectedHour = selectedItems[0].nativeElement.innerText; + selectedMinutes = selectedItems[1].nativeElement.innerText; + + expect(selectedItems[2]).toBeDefined(); // if the minutes column has no elements, this will be undefined + selectedAMPM = selectedItems[2].nativeElement.innerText; + expect(selectedHour).toBe('11'); + expect(selectedMinutes).toEqual('45'); + expect(selectedAMPM).toEqual('PM'); + + // ensure there is content in each element of the spinner + expect(minutesColumn.queryAll(By.css('span')).every(e => !!e.nativeElement.innerText)); + })); }); describe('Rendering tests', () => { From 52d192335940061b9df97f43e9a55ed4361368dd Mon Sep 17 00:00:00 2001 From: jackofdiamond5 Date: Fri, 14 Feb 2025 11:17:18 +0200 Subject: [PATCH 2/3] fix(time-picker): clamp hrs between 0-23 during interactions (cherry picked from commit e0dd4c4fadf7d492f79109335092d59c2202e030) (cherry picked from commit 07ef9d2e5ce3fea27754616ebaa254fa618ed8d1) --- .../src/lib/time-picker/time-picker.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 938d4ab883f..cdf653daee6 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -945,7 +945,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective } case 'ampmList': { let hour = this._selectedDate.getHours(); - hour = DateTimeUtil.isAm(item) ? hour - 12 : hour + 12; + hour = DateTimeUtil.isAm(item) + ? hour % 12 + : (hour % 12) + 12; + date.setHours(hour); date = this.validateDropdownValue(date, true); this.setSelectedValue(date); From 902fad91ccc64d1090efa27f1ca07fe6692ba5d0 Mon Sep 17 00:00:00 2001 From: jackofdiamond5 Date: Fri, 14 Feb 2025 12:15:24 +0200 Subject: [PATCH 3/3] test(time-picker): add more scenarios & remove unused global const (cherry picked from commit 9f2c4bc62dc3cafd4b3ea9c963c55d54a97aabc4) (cherry picked from commit fe1a1f0bd89eab41ff3c61e6e966c084f73b7100) --- .../src/lib/time-picker/time-picker.component.spec.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 1c7fb3ed6ef..f823045ea70 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -36,7 +36,6 @@ const CSS_CLASS_SECONDSLIST = '.igx-time-picker__secondsList'; const CSS_CLASS_AMPMLIST = 'igx-time-picker__ampmList'; const CSS_CLASS_SELECTED_ITEM = '.igx-time-picker__item--selected'; const CSS_CLASS_HEADER_HOUR = '.igx-time-picker__header-hour'; -const CSS_CLASS_OVERLAY = 'igx-overlay'; const CSS_CLASS_OVERLAY_WRAPPER = 'igx-overlay__wrapper'; const TIME_PICKER_TOGGLE_ICON = 'access_time'; const TIME_PICKER_CLEAR_ICON = 'clear'; @@ -1123,8 +1122,12 @@ describe('IgxTimePicker', () => { expect(selectedMinutes).toEqual('45'); expect(selectedAMPM).toEqual('PM'); - // ensure there is content in each element of the spinner - expect(minutesColumn.queryAll(By.css('span')).every(e => !!e.nativeElement.innerText)); + // ensure there is content in each element of the spinners + // '08', '09', '10', '11', '12', '01', '02' + expect(hourColumn.queryAll(By.css('span')).every(e => !!e.nativeElement.innerText)).toBeTrue(); + + // '00', '15', '30', '45', '', '', '' - three empty elements to align the minutes spinner length with the hours spinner length + expect(minutesColumn.queryAll(By.css('span')).filter(e => !!e.nativeElement.innerText).length).toEqual(4); })); });