refactor(drp): open calendar only on click on input & toggle icon (prefix)

Author: ddaribo

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -774,9 +774,9 @@ describe('IgxDateRangePicker', () => {
                 }));
             });
 
-            it('should expand the calendar if the default icon is clicked', fakeAsync(() => {
-                const input = fixture.debugElement.query(By.css('igx-input-group'));
-                input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            it('should expand the calendar if the default icon (prefix) is clicked', fakeAsync(() => {
+                const prefix = fixture.debugElement.query(By.directive(IgxPrefixDirective));
+                prefix.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                 tick();
                 fixture.detectChanges();
                 expect(fixture.componentInstance.dateRange.collapsed).toBeFalsy();

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -665,6 +665,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     public override ngAfterViewInit(): void {
         super.ngAfterViewInit();
         this.subscribeToDateEditorEvents();
+        this.subscribeToClick();
         this.configPositionStrategy();
         this.configOverlaySettings();
         this.cacheFocusedInput();
@@ -719,8 +720,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     /** @hidden @internal */
-    public getEditElement() {
-        return this.inputDirective.nativeElement;
+    public getEditElement(): HTMLInputElement | undefined {
+        return this.inputDirective?.nativeElement;
     }
 
     protected onStatusChanged = () => {
@@ -979,6 +980,20 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return { start: range.start as Date, end: range.end as Date };
     }
 
+    private subscribeToClick() {
+        const editElement = this.getEditElement();
+        if (!editElement) {
+            return;
+        }
+        fromEvent(editElement, 'click')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+                if (!this.isDropdown) {
+                    this.toggle();
+                }
+            });
+    }
+
     private subscribeToDateEditorEvents(): void {
         if (this.hasProjectedInputs) {
             const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;