From e784abf15c760075d225733d098d14a1d4276d56 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Mon, 9 Dec 2019 15:11:56 +0200 Subject: [PATCH] refactor(combo): revert Ivy workaround in combo click handler --- .../src/lib/combo/combo-add-item.component.ts | 14 +++-------- .../src/lib/combo/combo-item.component.ts | 13 ++++------ .../src/lib/combo/combo.component.spec.ts | 2 +- .../src/lib/drop-down/drop-down-item.base.ts | 25 +++++++++++++++++++ .../lib/drop-down/drop-down-item.component.ts | 14 +++-------- 5 files changed, 37 insertions(+), 31 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-add-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-add-item.component.ts index e2acabe9cbb..313a51f121b 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-add-item.component.ts +++ b/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?) { - } } diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index 6a55530b1b4..fc34cbcb5a3 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/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); } diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index c6caa25e70f..29553b2cfea 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/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); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts index 9155983b2ad..4b5757e52a2 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts +++ b/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 { + } } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts index 3681bf6bd92..71d5d20f9c4 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts +++ b/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); }