diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts index 01d03dc791d..153aeb94e6b 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts @@ -1276,6 +1276,26 @@ describe('IgxDateRangePicker', () => { expect(dateRange.opening.emit).toHaveBeenCalledTimes(0); expect(dateRange.opened.emit).toHaveBeenCalledTimes(0); })); + + it('should keep the calendar open when input is focused by click and while typing', fakeAsync(() => { + fixture.componentInstance.dateRange.open(); + fixture.detectChanges(); + tick(DEBOUNCE_TIME); + + startInput.triggerEventHandler('focus', {}); + fixture.detectChanges(); + UIInteractions.simulateClickAndSelectEvent(startInput.nativeElement); + fixture.detectChanges(); + tick(DEBOUNCE_TIME); + + expect(dateRange.collapsed).toBeFalsy(); + + UIInteractions.simulateTyping('01/10/202', startInput); + fixture.detectChanges(); + tick(DEBOUNCE_TIME); + + expect(dateRange.collapsed).toBeFalsy(); + })); }); it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index e6b5edca0ba..555bdb6bbe0 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -789,7 +789,11 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective this.opened.emit({ owner: this }); }); - this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e) => { + this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e: OverlayCancelableEventArgs) => { + const isEscape = e.event && (e.event as KeyboardEvent).key === this.platform.KEYMAP.ESCAPE; + if (this.isProjectedInputTarget(e.event) && !isEscape) { + e.cancel = true; + } this.handleClosing(e as OverlayCancelableEventArgs); }); @@ -803,6 +807,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective }); } + private isProjectedInputTarget(event: Event): boolean { + if (!this.hasProjectedInputs || !event) { + return false; + } + const path = event.composed ? event.composedPath() : [event.target]; + return this.projectedInputs.some(i => + path.includes(i.dateTimeEditor.nativeElement) + ); + } + private updateValue(value: DateRange) { this._value = value ? value : null; this.updateInputs();