Merge pull request #6317 from IgniteUI/vslavov/revert-combo-ivy-workaround

refactor(combo): revert Ivy workaround in combo click handler

Author: Lipata

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/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) {