Merge branch 'master' into ddincheva/cellEditingFocus

Author: zdrawku

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/combo/combo-add-item.component.ts

@@ -1,5 +1,5 @@
 import { IgxComboItemComponent } from './combo-item.component';
-import { Component, HostListener } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * @hidden
@@ -17,18 +17,10 @@ export class IgxComboAddItemComponent extends IgxComboItemComponent {
     }
 
     /**
-     * @hidden
-     * @internal
-     * This is related to https://github.com/angular/angular/issues/33300
-     * When the above is fixed, we can remove the @HostListener decorator and move
-     * the body of the `handleClick` method back under `clicked`
+     * @inheritdoc
      */
-    @HostListener('click')
-    handleClick() {
+    clicked(event?) {
         this.comboAPI.disableTransitions = false;
         this.comboAPI.add_custom_item();
     }
-
-    clicked(event?) {
-    }
 }

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

@@ -84,15 +84,12 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
         return rect.y >= parentDiv.y;
     }
 
-    clicked(event) {
+    /**
+     * @inheritdoc
+     */
+    clicked(event): void {
         this.comboAPI.disableTransitions = false;
-        if (this.disabled || this.isHeader) {
-            const focusedItem = this.dropDown.items.find((item) => item.focused);
-            if (this.dropDown.allowItemsFocus && focusedItem) {
-                focusedItem.element.nativeElement.focus({ preventScroll: true });
-            }
-            return;
-        }
+        if (!this.isSelectable) { return; }
         this.dropDown.navigateItem(this.index);
         this.comboAPI.set_selected_item(this.itemID, event);
     }

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -369,7 +369,7 @@ describe('igxCombo', () => {
             await wait(30);
             items = fix.debugElement.queryAll(By.css('.' + CSS_CLASS_DROPDOWNLISTITEM));
             lastItem = items[items.length - 1].componentInstance;
-            (lastItem as IgxComboAddItemComponent).handleClick();
+            (lastItem as IgxComboAddItemComponent).clicked();
             fix.detectChanges();
             // After `Add Item` is clicked, the input is focused and the item is added to the list
             expect(dropdown.focusedItem).toEqual(null);

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-item.base.ts

@@ -178,7 +178,7 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
      */
     @HostBinding('class.igx-drop-down__item--focused')
     get focused(): boolean {
-        return (!this.isHeader && !this.disabled) && this._focused;
+        return this.isSelectable && this._focused;
     }
 
     /**
@@ -329,4 +329,26 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
             }
         }
     }
+
+    /** Returns true if the items is not a header or disabled  */
+    protected get isSelectable(): boolean {
+        return  !(this.disabled || this.isHeader);
+    }
+
+    /** If `allowItemsFocus` is enabled, keep the browser focus on the active item */
+    protected ensureItemFocus() {
+        if (this.dropDown.allowItemsFocus) {
+            const focusedItem = this.dropDown.items.find((item) => item.focused);
+            if (!focusedItem) { return; }
+            focusedItem.element.nativeElement.focus({ preventScroll: true });
+        }
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('click', ['$event'])
+    clicked(event): void {
+    }
 }

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

@@ -1,6 +1,5 @@
 import {
     Component,
-    HostListener,
     HostBinding
 } from '@angular/core';
 import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
@@ -24,7 +23,7 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
             const focusedIndex = focusedItem ? focusedItem.index : -1;
             focusedState = this._index === focusedIndex;
         }
-        return !this.isHeader && !this.disabled && focusedState;
+        return this.isSelectable && focusedState;
     }
 
     /**
@@ -59,7 +58,7 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
      */
     @HostBinding('attr.tabindex')
     get setTabIndex() {
-        const shouldSetTabIndex = this.dropDown.allowItemsFocus && !(this.disabled || this.isHeader);
+        const shouldSetTabIndex = this.dropDown.allowItemsFocus && this.isSelectable;
         if (shouldSetTabIndex) {
             return 0;
         } else {
@@ -68,15 +67,11 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
     }
 
     /**
-     * @hidden @internal
+     * @inheritdoc
      */
-    @HostListener('click', ['$event'])
-    clicked(event) {
-        if (this.disabled || this.isHeader) {
-            const focusedItem = this.dropDown.items.find((item) => item.focused);
-            if (this.dropDown.allowItemsFocus && focusedItem) {
-                focusedItem.element.nativeElement.focus({ preventScroll: true });
-            }
+    clicked(event): void {
+        if (!this.isSelectable) {
+            this.ensureItemFocus();
             return;
         }
         if (this.selection) {

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"