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

Author: ViktorSlavov

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.shouldSelect) { return; }
         this.dropDown.navigateItem(this.index);
         this.comboAPI.set_selected_item(this.itemID, event);
     }

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

@@ -368,7 +368,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

@@ -329,4 +329,29 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
             }
         }
     }
+
+    /**
+     * If the clicked item is a header or is disabled,
+     * should not attempt to select it.
+     * If `allowItemsFocus` is true, should move the focus to the actual item.
+     */
+    protected get shouldSelect(): boolean {
+        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 false;
+        } else {
+            return 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';
@@ -68,17 +67,10 @@ 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 });
-            }
-            return;
-        }
+    clicked(event): void {
+        if (!this.shouldSelect) { return; }
         if (this.selection) {
             this.dropDown.selectItem(this, event);
         }