Merge pull request #5091 from IgniteUI/vbogomolov/timepicker-outlet

Outlet prop for timepicker dialog mode working correctly

Author: bkulov

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

@@ -10,6 +10,7 @@ import { IgxInputGroupModule } from '../input-group';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { InteractionMode } from '../core/enums';
 import { IgxIconModule } from '../icon';
+import { IgxOverlayOutletDirective, IgxToggleModule } from '../directives/toggle/toggle.directive';
 
 describe('IgxTimePicker', () => {
     configureTestSuite();
@@ -28,14 +29,16 @@ describe('IgxTimePicker', () => {
                 IgxTimePickerDropDownComponent,
                 IgxTimePickerDropDownSingleHourComponent,
                 IgxTimePickerDropDownNoValueComponent,
-                IgxTimePickerRetemplatedDropDownComponent
+                IgxTimePickerRetemplatedDropDownComponent,
+                IgxTimePickerWithOutletComponent
             ],
             imports: [
                 IgxTimePickerModule,
                 FormsModule,
                 NoopAnimationsModule,
                 IgxInputGroupModule,
-                IgxIconModule
+                IgxIconModule,
+                IgxToggleModule
             ]
         }).compileComponents();
     }));
@@ -1472,6 +1475,29 @@ describe('IgxTimePicker', () => {
 
             expect(document.getElementsByClassName('igx-time-picker__buttons').length).toEqual(0);
         }));
+
+    });
+
+    describe('Timepicker with outlet', () => {
+        configureTestSuite();
+        let fixture;
+        let timePicker;
+
+        it('should display the overlay in the provided outlet', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxTimePickerWithOutletComponent);
+            timePicker = fixture.componentInstance.timepicker;
+            fixture.detectChanges();
+            const dom = fixture.debugElement;
+
+            expect(() => {
+                const timePickerTarget = dom.query(By.directive(IgxInputDirective));
+                UIInteractions.clickElement(timePickerTarget);
+                tick();
+                fixture.detectChanges();
+            }).not.toThrowError();
+
+            expect(timePicker.outlet).toBeDefined();
+        }));
     });
 
     describe('TimePicker retemplating and customization', () => {
@@ -1959,6 +1985,16 @@ export class IgxTimePickerRetemplatedDropDownComponent {
     }
 }
 
+@Component({
+    template: `
+        <igx-time-picker [outlet]="outlet" #timepicker></igx-time-picker>
+        <div igxOverlayOutlet #outlet="overlay-outlet"></div>
+    `
+})
+export class IgxTimePickerWithOutletComponent {
+    @ViewChild('timepicker', { static: true }) public timepicker: IgxTimePickerComponent;
+}
+
 // helper functions
 function findByInnerText(collection, searchText) {
     for (const element of collection) {

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -371,7 +371,7 @@ export class IgxTimePickerComponent implements
 
     public get overlaySettings(): OverlaySettings {
         return this._overlaySettings ? this._overlaySettings :
-            (this.mode === InteractionMode.Dialog ? undefined : this._dropDownOverlaySettings);
+            (this.mode === InteractionMode.Dialog ? this._dialogOverlaySettings : this._dropDownOverlaySettings);
     }
 
     /**
@@ -587,6 +587,7 @@ export class IgxTimePickerComponent implements
     private _dateFromModel: Date;
     private _destroy$ = new Subject<boolean>();
     private _dropDownOverlaySettings: OverlaySettings;
+    private _dialogOverlaySettings: OverlaySettings;
 
     private _prevSelectedHour: string;
     private _prevSelectedMinute: string;
@@ -753,6 +754,7 @@ export class IgxTimePickerComponent implements
             scrollStrategy: new AbsoluteScrollStrategy(),
             positionStrategy: new AutoPositionStrategy()
         };
+        this._dialogOverlaySettings = {};
     }
 
     /**
@@ -1344,7 +1346,6 @@ export class IgxTimePickerComponent implements
         if (target && settings && settings.positionStrategy) {
             settings.positionStrategy.settings.target = target;
         }
-
         if (this.outlet) {
             settings.outlet = this.outlet;
         }