Skip to content

Commit 05c9de8

Browse files
rkaraivanovrkaraivanov
authored
Merge pull request #6077 from IgniteUI/vslavov/combo-ivy-renderer
Combo Ivy Renderer Fix
2 parents aa19538 + aab8776 commit 05c9de8

File tree

8 files changed

+146
-380
lines changed

8 files changed

+146
-380
lines changed

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IgxComboItemComponent } from './combo-item.component';
2-
import { Component } from '@angular/core';
2+
import { Component, HostListener } from '@angular/core';
33

44
/**
55
* @hidden
@@ -16,8 +16,19 @@ export class IgxComboAddItemComponent extends IgxComboItemComponent {
1616
set selected(value: boolean) {
1717
}
1818

19-
clicked(event?) {
19+
/**
20+
* @hidden
21+
* @internal
22+
* This is related to https://github.com/angular/angular/issues/33300
23+
* When the above is fixed, we can remove the @HostListener decorator and move
24+
* the body of the `handleClick` method back under `clicked`
25+
*/
26+
@HostListener('click')
27+
handleClick() {
2028
this.comboAPI.disableTransitions = false;
2129
this.comboAPI.add_custom_item();
2230
}
31+
32+
clicked(event?) {
33+
}
2334
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import {
44
HostBinding,
55
Inject,
66
Input,
7-
DoCheck,
8-
HostListener
7+
DoCheck
98
} from '@angular/core';
109
import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component';
1110
import { IGX_DROPDOWN_BASE, IDropDownBase, Navigate } from '../drop-down/drop-down.common';
@@ -85,7 +84,6 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
8584
return rect.y >= parentDiv.y;
8685
}
8786

88-
@HostListener('click', ['$event'])
8987
clicked(event) {
9088
this.comboAPI.disableTransitions = false;
9189
if (this.disabled || this.isHeader) {

‎projects/igniteui-angular/src/lib/combo/combo.common.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ElementRef, EventEmitter, InjectionToken } from '@angular/core';
22
import { CancelableEventArgs, CancelableBrowserEventArgs } from '../core/utils';
3-
import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
43

54
export const IGX_COMBO_COMPONENT = new InjectionToken<IgxComboBase>('IgxComboComponentToken');
65

@@ -12,7 +11,6 @@ export interface IgxComboBase {
1211
groupKey: string;
1312
isRemote: boolean;
1413
filteredData: any[];
15-
filteringExpressions: IFilteringExpression[];
1614
totalItemCount: number;
1715
itemsMaxHeight: number;
1816
itemHeight: number;

‎projects/igniteui-angular/src/lib/combo/combo.component.html

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
<ng-template #complex let-display let-data="data" let-key="displayKey">
2-
{{display[key]}}
3-
</ng-template>
4-
<ng-template #primitive let-display>
5-
{{display}}
6-
</ng-template>
7-
<ng-template #empty>
8-
<span>The list is empty</span>
9-
</ng-template>
10-
<ng-template #addItemDefault let-control>
11-
<button igxButton="flat" igxRipple>Add item</button>
12-
</ng-template>
13-
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
14-
{{ item[key] }}
15-
</ng-template>
16-
171
<igx-input-group #inputGroup [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
182
<ng-container ngProjectAs="[igxLabel]">
193
<ng-content select="[igxLabel]"></ng-content>
@@ -22,28 +6,34 @@
226
<ng-content select="igx-prefix"></ng-content>
237
</ng-container>
248
<ng-container ngProjectAs="igx-hint, [igxHint]">
25-
<ng-content select="igx-hint, [igxHint]"></ng-content>
26-
</ng-container>
9+
<ng-content select="igx-hint, [igxHint]"></ng-content>
10+
</ng-container>
2711
<input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
2812
[disabled]="disabled" (blur)="onBlur()" />
2913
<ng-container ngProjectAs="igx-suffix">
3014
<ng-content select="igx-suffix"></ng-content>
3115
</ng-container>
32-
<igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple (click)="handleClearItems($event)">
16+
<igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple
17+
(click)="handleClearItems($event)">
3318
<ng-container *ngIf="clearIconTemplate">
3419
<ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
3520
</ng-container>
36-
<igx-icon *ngIf="!clearIconTemplate" fontSet="material">clear</igx-icon>
21+
<igx-icon *ngIf="!clearIconTemplate" fontSet="material">
22+
clear
23+
</igx-icon>
3724
</igx-suffix>
3825
<igx-suffix igxButton="icon" class="igx-combo__toggle-button" igxRipple>
3926
<ng-container *ngIf="toggleIconTemplate">
4027
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
4128
</ng-container>
42-
<igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
29+
<igx-icon *ngIf="!toggleIconTemplate" fontSet="material">
30+
{{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}
31+
</igx-icon>
4332
</igx-suffix>
4433
</igx-input-group>
45-
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)"
46-
(onClosing)="handleClosing($event)" (onOpened)="handleOpened()" (onClosed)="handleClosed()">
34+
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
35+
[width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)" (onClosing)="handleClosing($event)"
36+
(onOpened)="handleOpened()" (onClosed)="handleClosed()">
4737
<igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
4838
<input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
4939
[(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
@@ -52,33 +42,55 @@
5242
</igx-input-group>
5343
<ng-container *ngTemplateOutlet="headerTemplate">
5444
</ng-container>
55-
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
56-
[igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()" [tabindex]="dropdown.collapsed ? -1 : 0"
57-
role="listbox" [attr.id]="dropdown.id">
58-
<ng-template igxFor let-item let-index="index" [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
59-
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
60-
(onChunkPreload)="dataLoading($event)">
61-
<igx-combo-item [itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="index">
62-
<ng-container *ngIf="item.isHeader">
63-
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
45+
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
46+
[style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
47+
[tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
48+
<igx-combo-item role="option" [itemHeight]='itemHeight'
49+
*igxFor="let item of data
50+
| comboFiltering:searchValue:displayKey:filterable
51+
| comboGrouping:groupKey:valueKey;
52+
index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
53+
[value]="item" [isHeader]="item.isHeader" [index]="rowIndex">
54+
<ng-container *ngIf="item.isHeader">
55+
<ng-container
56+
*ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
57+
context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}">
6458
</ng-container>
65-
<ng-container *ngIf="!item.isHeader">
66-
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
59+
</ng-container>
60+
<ng-container *ngIf="!item.isHeader">
61+
<ng-container #listItem
62+
*ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
6763
</ng-container>
68-
</igx-combo-item>
69-
</ng-template>
64+
</ng-container>
65+
</igx-combo-item>
7066
</div>
7167
<div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
7268
<div class="igx-combo__empty" *ngIf="filteredData.length === 0">
7369
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
7470
</ng-container>
7571
</div>
76-
<igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
77-
class="igx-combo__add-item" role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
72+
<igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()"
73+
[tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
74+
aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
7875
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
7976
</ng-container>
8077
</igx-combo-add-item>
8178
</div>
8279
<ng-container *ngTemplateOutlet="footerTemplate">
8380
</ng-container>
8481
</igx-combo-drop-down>
82+
<ng-template #complex let-display let-data="data" let-key="displayKey">
83+
{{display[key]}}
84+
</ng-template>
85+
<ng-template #primitive let-display>
86+
{{display}}
87+
</ng-template>
88+
<ng-template #empty>
89+
<span>The list is empty</span>
90+
</ng-template>
91+
<ng-template #addItemDefault let-control>
92+
<button igxButton="flat" igxRipple>Add item</button>
93+
</ng-template>
94+
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
95+
{{ item[key] }}
96+
</ng-template>

0 commit comments

Comments
 (0)