Merge pull request #8735 from IgniteUI/bpenkov/date-range-dropdown-positioning

Fix IgxDateRangePicker default dropdown positioning

Author: rkaraivanov

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

@@ -17,6 +17,7 @@ import { IgxDateTimeEditorModule, IgxDateTimeEditorDirective } from '../directiv
 import { DateRangeType } from '../core/dates';
 import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api';
 import { IgxIconModule } from '../icon/public_api';
+import { AutoPositionStrategy } from '../services/public_api';
 
 // The number of milliseconds in one day
 const ONE_DAY = 1000 * 60 * 60 * 24;
@@ -30,6 +31,7 @@ const CSS_CLASS_CALENDAR_TOGGLE = '.igx-toggle';
 const CSS_CLASS_ICON = 'igx-icon';
 const CSS_CLASS_DONE_BUTTON = 'igx-button--flat';
 const CSS_CLASS_LABEL = 'igx-input-group__label';
+const CSS_CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
 
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
@@ -1119,6 +1121,23 @@ describe('IgxDateRangePicker', () => {
                 const result = fixture.componentInstance.formatter({ start: startDate, end: endDate });
                 expect(singleInputElement.nativeElement.value).toEqual(result);
             });
+
+            it('should invoke AutoPositionStrategy by default with proper arguments', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                spyOn<any>(AutoPositionStrategy.prototype, 'position');
+
+                dateRange = fixture.componentInstance.dateRange;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                const overlayContent = document.getElementsByClassName(CSS_CLASS_OVERLAY_CONTENT)[0] as HTMLElement;
+                expect(AutoPositionStrategy.prototype.position).toHaveBeenCalledTimes(1);
+                expect(AutoPositionStrategy.prototype.position)
+                    .toHaveBeenCalledWith(overlayContent, jasmine.anything(), document,
+                        jasmine.anything(), dateRange.element.nativeElement);
+            }));
         });
     });
 });
@@ -1135,7 +1154,7 @@ export class DateRangeTestComponent implements OnInit {
     public minValue: Date | String;
     public maxValue: Date | String;
 
-    @ViewChild(IgxDateRangePickerComponent, { read: IgxDateRangePickerComponent, static: true })
+    @ViewChild(IgxDateRangePickerComponent, { static: true })
     public dateRange: IgxDateRangePickerComponent;
 
     public ngOnInit(): void {

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

@@ -516,8 +516,8 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
      * @example
      * ```typescript
      * public selectFiveDayRange() {
-     *  const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
      *  const today = new Date();
+     *  const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
      *  this.dateRange.selectRange(today, inFiveDays);
      * }
      * ```
@@ -756,6 +756,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     public handleSelection(selectionData: Date[]): void {
         this.value = this.extractRange(selectionData);
         this.rangeSelected.emit(this.value);
+        if (this.mode === InteractionMode.DropDown && selectionData?.length > 1) {
+            this.close();
+        }
     }
 
     protected onStatusChanged = () => {
@@ -955,7 +958,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             closeAnimation: fadeOut
         };
         this._dropDownOverlaySettings.positionStrategy = new AutoPositionStrategy(this._positionSettings);
-        this.dropdownOverlaySettings.target = this.element.nativeElement;
+        this._dropDownOverlaySettings.target = this.element.nativeElement;
     }
 
     private configOverlaySettings(): void {