feat(overlay): expose onAppended event #6472 (#6496)

Author: IvayloG

CHANGELOG.md

@@ -21,7 +21,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxCarousel`:
     - **Breaking Changes** -The carousel slides are no longer array, they are changed to QueryList.
     - **Behavioural change** - When slides are more than 5, a label is shown instead of the indicators. The count limit of visible indicators can be changed with the input `maximumIndicatorsCount`
-
+- `igxOverlay`:
+    - **Behavioural Change** - `igxOverlay` - no longer persists element scrolling `out of the box`. In order to persist an element scroll position after attaching the element to an overlay, handle the exposed `onAppended` overlay event and manage/restore the scroll position.
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:

projects/igniteui-angular/src/lib/directives/toggle/README.md

@@ -28,7 +28,9 @@ Open/Close the directive only through one trigger by exporting it with name **to
 handlers when the toggle is opened and respectively closed. 
 ```html
 <button (click)="toggleRef.toggle()">Toggle</button>
-<div igxToggle #toggleRef="toggle" (onOpening)="eventHandler()" (onOpened)="eventHandler()" (onClosing)="eventHandler()" (onClosed)="eventHandler()">
+<div igxToggle #toggleRef="toggle" 
+    (onOpening)="eventHandler()" (onAppended)="eventHandler()" (onOpened)="eventHandler()"
+    (onClosing)="eventHandler()" (onClosed)="eventHandler()" >
     <p>Some content that user would like to make it togglable.</p>
 </div>
 ```
@@ -38,10 +40,11 @@ handlers when the toggle is opened and respectively closed.
 ### Outputs
 | Name | Return Type | Description |
 |:--:|:---|:---|
-| `onOpening` | `void` | Emits an event before the toggle container is opened. |
-| `onOpened` | `void` | Emits an event after the toggle container is opened. |
-| `onClosing` | `void` | Emits an event before the toggle container is closed. |
-| `onClosed` | `void` | Emits an event after the toggle container is closed. |
+| `onAppended`   | `void` | Emits an event after content is appended to the overlay.         |
+| `onOpening`    | `void` | Emits an event before the toggle container is opened.            |
+| `onOpened`     | `void` | Emits an event after the toggle container is opened.             |
+| `onClosing`    | `void` | Emits an event before the toggle container is closed.            |
+| `onClosed`     | `void` | Emits an event after the toggle container is closed.             |
 ### Methods
 | Name   | Arguments | Return Type | Description |
 |:----------:|:------|:------|:------|

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts

@@ -78,6 +78,19 @@ describe('IgxToggle', () => {
         expect(toggle.onOpened.emit).toHaveBeenCalled();
     }));
 
+    it('should emit \'onAppended\' event', fakeAsync(() => {
+        const fixture = TestBed.createComponent(IgxToggleTestComponent);
+        fixture.detectChanges();
+
+        const toggle = fixture.componentInstance.toggle;
+        spyOn(toggle.onAppended, 'emit');
+        toggle.open();
+        tick();
+        fixture.detectChanges();
+
+        expect(toggle.onAppended.emit).toHaveBeenCalled();
+    }));
+
     it('should emit \'onClosing\' and \'onClosed\' events', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxToggleTestComponent);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -35,6 +35,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     private _overlayOpenedSub: Subscription;
     private _overlayClosingSub: Subscription;
     private _overlayClosedSub: Subscription;
+    private _overlayAppendedSub: Subscription;
 
     /**
      * Emits an event after the toggle container is opened.
@@ -164,6 +165,25 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         @Optional() private navigationService: IgxNavigationService) {
     }
 
+    /**
+     * Emits an event after the toggle element is appended to the overlay container.
+     *
+     * ```typescript
+     * onAppended() {
+     *  alert("Content appended!");
+     * }
+     * ```
+     *
+     * ```html
+     * <div
+     *   igxToggle
+     *   (onAppended)='onToggleAppended()'>
+     * </div>
+     * ```
+     */
+    @Output()
+    public onAppended = new EventEmitter();
+
     /**
      * Opens the toggle.
      *
@@ -196,32 +216,37 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
             return;
         }
 
-        this.overlayService.show(this._overlayId, overlaySettings);
-
         this.unsubscribe();
+
+        this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => {
+            this.onAppended.emit();
+        });
+
         this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => {
             this.onOpened.emit();
         });
 
         this._overlayClosingSub = this.overlayService
-            .onClosing
-            .pipe(...this._overlaySubFilter)
-            .subscribe((e: OverlayClosingEventArgs) => {
-                const eventArgs: CancelableBrowserEventArgs = { cancel: false, event: e.event };
-                this.onClosing.emit(eventArgs);
-                e.cancel = eventArgs.cancel;
-
-                //  in case event is not canceled this will close the toggle and we need to unsubscribe.
-                //  Otherwise if for some reason, e.g. close on outside click, close() gets called before
-                //  onClosed was fired we will end with calling onClosing more than once
-                if (!e.cancel) {
-                    this.clearSubscription(this._overlayClosingSub);
-                }
-            });
+        .onClosing
+        .pipe(...this._overlaySubFilter)
+        .subscribe((e: OverlayClosingEventArgs) => {
+            const eventArgs: CancelableBrowserEventArgs = { cancel: false, event: e.event };
+            this.onClosing.emit(eventArgs);
+            e.cancel = eventArgs.cancel;
+
+            //  in case event is not canceled this will close the toggle and we need to unsubscribe.
+            //  Otherwise if for some reason, e.g. close on outside click, close() gets called before
+            //  onClosed was fired we will end with calling onClosing more than once
+            if (!e.cancel) {
+                this.clearSubscription(this._overlayClosingSub);
+            }
+        });
 
         this._overlayClosedSub = this.overlayService.onClosed
-            .pipe(...this._overlaySubFilter)
-            .subscribe(this.overlayClosed);
+        .pipe(...this._overlaySubFilter)
+        .subscribe(this.overlayClosed);
+
+        this.overlayService.show(this._overlayId, overlaySettings);
     }
 
     /**
@@ -319,6 +344,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this.clearSubscription(this._overlayOpenedSub);
         this.clearSubscription(this._overlayClosingSub);
         this.clearSubscription(this._overlayClosedSub);
+        this.clearSubscription(this._overlayAppendedSub);
     }
 
     private clearSubscription(subscription: Subscription) {

projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

@@ -1,5 +1,5 @@
 <div class="igx-drop-down__list" igxToggle [style.width]="width"
-(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
+(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onAppended)="onToggleContentAppended()"
 (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
     <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="this.listId" role="listbox"
     [style.height]="height"

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -1062,6 +1062,7 @@ describe('IgxDropDown ', () => {
             fixture.detectChanges();
 
             spyOn(componentInstance, 'onToggleOpening');
+            spyOn(componentInstance.dropdown, 'onToggleContentAppended');
             spyOn(componentInstance, 'onToggleOpened');
             spyOn(componentInstance, 'onToggleClosing');
             spyOn(componentInstance, 'onToggleClosed');
@@ -1073,13 +1074,14 @@ describe('IgxDropDown ', () => {
 
             fixture.detectChanges();
             expect(componentInstance.onToggleOpening).toHaveBeenCalledTimes(1);
+            expect(componentInstance.dropdown.onToggleContentAppended).toHaveBeenCalledTimes(1);
             expect(componentInstance.onToggleOpened).toHaveBeenCalledTimes(1);
             button.click({ stopPropagation: () => null });
             tick();
 
             fixture.detectChanges();
             expect(componentInstance.onToggleClosing).toHaveBeenCalledTimes(1);
-            expect(componentInstance.onToggleClosing).toHaveBeenCalledTimes(1);
+            expect(componentInstance.onToggleClosed).toHaveBeenCalledTimes(1);
         }));
 
         it('Should retain width/height properties', fakeAsync(() => {
@@ -1729,6 +1731,10 @@ class IgxDropDownTestScrollComponent {
     public selectItem5() {
         this.dropdownScroll.setSelectedItem(4);
     }
+
+    public selectItem15() {
+        this.dropdownScroll.setSelectedItem(14);
+    }
 }
 
 @Component({
@@ -1864,6 +1870,10 @@ class IgxDropDownWithScrollComponent implements OnInit {
         this.dropdownScroll.setSelectedItem(4);
     }
 
+    public selectItem15() {
+        this.dropdownScroll.setSelectedItem(14);
+    }
+
     ngOnInit() {
         this.dropdownScroll.height = '200px';
         for (let index = 1; index < 100; index++) {

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -365,14 +365,21 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         if (e.cancel) {
             return;
         }
-        if (!this.virtDir && this.selectedItem) {
-            this.scrollToItem(this.selectedItem);
-        }
+
         if (this.virtDir) {
             this.virtDir.scrollPosition = this._scrollPosition;
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    public onToggleContentAppended() {
+        if (!this.virtDir && this.selectedItem) {
+           this.scrollToItem(this.selectedItem);
+        }
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/services/overlay/README.md

@@ -123,10 +123,11 @@ this.overlay.show(component, overlaySettings);
 ##### Events
 
 ###### IgxOverlayService
-| Name        | Description                         | Cancelable | Parameters |
-|-------------|-------------------------------------|------------|------------|
-|onOpening    | Emitted before overlay shows        | true       |            |
-|onOpened     | Emitted after overlay shows         | false      |            |
-|onClosing    | Emitted before overlay hides        | true       |            |
-|onClosed     | Emitted after overlay hides         | false      |            |
-|onAnimation  | Emitted before animation is started | false      |            |
+| Name        | Description                                   | Cancelable | Parameters |
+|-------------|-----------------------------------------------|------------|------------|
+|onAppended   | Emitted after overlay's content is appended   | false      |            |
+|onOpening    | Emitted before overlay shows                  | true       |            |
+|onOpened     | Emitted after overlay shows                   | false      |            |
+|onClosing    | Emitted before overlay hides                  | true       |            |
+|onClosed     | Emitted after overlay hides                   | false      |            |
+|onAnimation  | Emitted before animation is started           | false      |            |

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -324,6 +324,7 @@ describe('igxOverlay', () => {
             spyOn(overlayInstance.onClosed, 'emit');
             spyOn(overlayInstance.onClosing, 'emit');
             spyOn(overlayInstance.onOpened, 'emit');
+            spyOn(overlayInstance.onAppended, 'emit');
             spyOn(overlayInstance.onOpening, 'emit');
             spyOn(overlayInstance.onAnimation, 'emit');
 
@@ -335,6 +336,7 @@ describe('igxOverlay', () => {
                 .toHaveBeenCalledWith({ id: firstCallId, componentRef: jasmine.any(ComponentRef), cancel: false });
             const args: OverlayEventArgs = (overlayInstance.onOpening.emit as jasmine.Spy).calls.mostRecent().args[0];
             expect(args.componentRef.instance).toEqual(jasmine.any(SimpleDynamicComponent));
+            expect(overlayInstance.onAppended.emit).toHaveBeenCalledTimes(1);
             expect(overlayInstance.onAnimation.emit).toHaveBeenCalledTimes(1);
 
             tick();
@@ -356,6 +358,7 @@ describe('igxOverlay', () => {
             tick();
             expect(overlayInstance.onOpening.emit).toHaveBeenCalledTimes(2);
             expect(overlayInstance.onOpening.emit).toHaveBeenCalledWith({ componentRef: undefined, id: secondCallId, cancel: false });
+            expect(overlayInstance.onAppended.emit).toHaveBeenCalledTimes(2);
             expect(overlayInstance.onAnimation.emit).toHaveBeenCalledTimes(3);
 
             tick();

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -62,6 +62,16 @@ export class IgxOverlayService implements OnDestroy {
      */
     public onOpening = new EventEmitter<OverlayCancelableEventArgs>();
 
+    /**
+     * Emitted after the component is appended to the overlay, and before animations are started.
+     * ```typescript
+     * onAppended(event: OverlayEventArgs){
+     *     const onAppended = event;
+     * }
+     * ```
+     */
+    public onAppended = new EventEmitter<OverlayEventArgs>();
+
     /**
      * Emitted after the component is opened and all animations are finished.
      * ```typescript
@@ -292,6 +302,9 @@ export class IgxOverlayService implements OnDestroy {
             if (info.componentRef) {
                 info.componentRef.changeDetectorRef.detectChanges();
             }
+
+            this.onAppended.emit({ id: info.id, componentRef: info.componentRef });
+
             this.updateSize(info);
             if (this._overlayInfos.indexOf(info) === -1) {
                 this._overlayInfos.push(info);
@@ -397,12 +410,7 @@ export class IgxOverlayService implements OnDestroy {
         const wrapperElement = this.getWrapperElement();
         const contentElement = this.getContentElement(wrapperElement, info.settings.modal);
         this.getOverlayElement(info).appendChild(wrapperElement);
-        const elementScrollTop = info.elementRef.nativeElement.scrollTop;
         contentElement.appendChild(info.elementRef.nativeElement);
-
-        if (elementScrollTop) {
-            info.elementRef.nativeElement.scrollTop = elementScrollTop;
-        }
     }
 
     private getWrapperElement(): HTMLElement {