Skip to content

Commit aa0d8c9

Browse files
SisIvanovaSisIvanova
authored
fix(combo/select): remove suffix dynamically (#15957)
1 parent df32cbc commit aa0d8c9

File tree

4 files changed

+67
-23
lines changed

4 files changed

+67
-23
lines changed

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import {
2121
Output,
2222
QueryList,
2323
TemplateRef,
24-
ViewChild
24+
ViewChild,
25+
ViewChildren
2526
} from '@angular/core';
2627
import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
2728
import { caseSensitive } from '@igniteui/material-icons-extended';
@@ -748,6 +749,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
748749
@ContentChildren(IgxSuffixDirective, { descendants: true })
749750
protected suffixes: QueryList<IgxSuffixDirective>;
750751

752+
@ViewChildren(IgxSuffixDirective)
753+
protected internalSuffixes: QueryList<IgxSuffixDirective>;
754+
751755
/** @hidden @internal */
752756
public get searchValue(): string {
753757
return this._searchValue;
@@ -984,8 +988,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
984988
this.inputGroup.prefixes = this.prefixes;
985989
}
986990

987-
if (this.inputGroup && this.suffixes?.length > 0) {
988-
this.inputGroup.suffixes = this.suffixes;
991+
if (this.inputGroup) {
992+
const suffixesArray = this.suffixes?.toArray() ?? [];
993+
const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];
994+
const mergedSuffixes = new QueryList<IgxSuffixDirective>();
995+
mergedSuffixes.reset([
996+
...suffixesArray,
997+
...internalSuffixesArray
998+
]);
999+
this.inputGroup.suffixes = mergedSuffixes;
9891000
}
9901001
}
9911002

‎projects/igniteui-angular/src/lib/input-group/input-group.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
284284
}
285285

286286
/** @hidden @internal */
287-
public set suffixes(items: QueryList<IgxPrefixDirective>) {
287+
public set suffixes(items: QueryList<IgxSuffixDirective>) {
288288
this._suffixes = items;
289289
}
290290

‎projects/igniteui-angular/src/lib/select/select.component.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import {
2121
Output,
2222
QueryList,
2323
TemplateRef,
24-
ViewChild
24+
ViewChild,
25+
ViewChildren
2526
} from '@angular/core';
2627
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
2728
import { AbstractControl, ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -122,6 +123,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
122123
@ContentChildren(IgxSuffixDirective, { descendants: true })
123124
protected suffixes: QueryList<IgxSuffixDirective>;
124125

126+
@ViewChildren(IgxSuffixDirective)
127+
protected internalSuffixes: QueryList<IgxSuffixDirective>;
128+
125129
/** @hidden @internal */
126130
@ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;
127131

@@ -545,8 +549,15 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
545549
this.inputGroup.prefixes = this.prefixes;
546550
}
547551

548-
if (this.inputGroup && this.suffixes?.length > 0) {
549-
this.inputGroup.suffixes = this.suffixes;
552+
if (this.inputGroup) {
553+
const suffixesArray = this.suffixes?.toArray() ?? [];
554+
const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];
555+
const mergedSuffixes = new QueryList<IgxSuffixDirective>();
556+
mergedSuffixes.reset([
557+
...suffixesArray,
558+
...internalSuffixesArray
559+
]);
560+
this.inputGroup.suffixes = mergedSuffixes;
550561
}
551562
}
552563

‎src/app/input-group-showcase/input-group-showcase.sample.html‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,11 @@ <h1 class="showcase__title">Angular</h1>
2626
[attr.placeholder]="getPlaceholder()"
2727
igxInput
2828
/>
29-
<igx-suffix [hidden]="hideSuffix()">
30-
<igx-icon>face</igx-icon>
31-
</igx-suffix>
29+
@if (!hideSuffix()) {
30+
<igx-suffix>
31+
<igx-icon>face</igx-icon>
32+
</igx-suffix>
33+
}
3234
<igx-hint>Type your web address</igx-hint>
3335
</igx-input-group>
3436

@@ -48,9 +50,11 @@ <h1 class="showcase__title">Angular</h1>
4850
[attr.placeholder]="getPlaceholder()"
4951
igxInput>
5052
</textarea>
51-
<igx-suffix [hidden]="hideSuffix()">
52-
<igx-icon>face</igx-icon>
53-
</igx-suffix>
53+
@if (!hideSuffix()) {
54+
<igx-suffix>
55+
<igx-icon>face</igx-icon>
56+
</igx-suffix>
57+
}
5458
<igx-hint>Hint text</igx-hint>
5559
</igx-input-group>
5660

@@ -68,9 +72,11 @@ <h1 class="showcase__title">Angular</h1>
6872
<igx-hint>
6973
I am a Hint
7074
</igx-hint>
71-
<igx-suffix [hidden]="hideSuffix()">
72-
<igx-icon>favorite</igx-icon>
73-
</igx-suffix>
75+
@if (!hideSuffix()) {
76+
<igx-suffix>
77+
<igx-icon>favorite</igx-icon>
78+
</igx-suffix>
79+
}
7480
<igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
7581
<igx-select-item [value]="'Orange'">Orange</igx-select-item>
7682
<igx-select-item [value]="'Grapes'">Grapes</igx-select-item>
@@ -88,7 +94,11 @@ <h1 class="showcase__title">Angular</h1>
8894
<label igxLabel>{{ getLabel() }}</label>
8995
}
9096
<igx-icon igxPrefix [hidden]="hidePrefix()">favorite</igx-icon>
91-
<igx-icon igxSuffix [hidden]="hideSuffix()">favorite</igx-icon>
97+
@if (!hideSuffix()) {
98+
<igx-suffix>
99+
<igx-icon>favorite</igx-icon>
100+
</igx-suffix>
101+
}
92102
<igx-hint>Select a unique falsy value</igx-hint>
93103
</igx-combo>
94104

@@ -108,9 +118,11 @@ <h1 class="showcase__title">Angular</h1>
108118
[readOnly]="isReadonly()"
109119
igxInput
110120
/>
111-
<igx-suffix [hidden]="hideSuffix()">
112-
<igx-icon>face</igx-icon>
113-
</igx-suffix>
121+
@if (!hideSuffix()) {
122+
<igx-suffix>
123+
<igx-icon>face</igx-icon>
124+
</igx-suffix>
125+
}
114126
<igx-hint>Type your web address</igx-hint>
115127
</igx-input-group>
116128
</form>
@@ -157,7 +169,9 @@ <h1 class="showcase__title">Web components</h1>
157169
[type]="getNativeInputType()"
158170
[outlined]="isOutlined()">
159171
<span slot="prefix" [hidden]="hidePrefix()"><igc-icon name="face"></igc-icon></span>
160-
<span slot="suffix" [hidden]="hideSuffix()"><igc-icon name="face"></igc-icon></span>
172+
@if (!hideSuffix()) {
173+
<span slot="suffix"><igc-icon name="face"></igc-icon></span>
174+
}
161175
<span slot="helper-text">Type your web address</span>
162176
</igc-input>
163177

@@ -171,7 +185,9 @@ <h1 class="showcase__title">Web components</h1>
171185
[attr.placeholder]="getPlaceholder()"
172186
[outlined]="isOutlined()">
173187
<span slot="prefix" [hidden]="hidePrefix()"><igc-icon name="face"></igc-icon></span>
174-
<span slot="suffix" [hidden]="hideSuffix()"><igc-icon name="face"></igc-icon></span>
188+
@if (!hideSuffix()) {
189+
<span slot="suffix"><igc-icon name="face"></igc-icon></span>
190+
}
175191
<span slot="helper-text">Hint text</span>
176192
</igc-textarea>
177193

@@ -183,7 +199,9 @@ <h1 class="showcase__title">Web components</h1>
183199
[outlined]="isOutlined()"
184200
[style.--ig-size]="getSize()">
185201
<igc-icon slot="prefix" [hidden]="hidePrefix()" name="favorite"></igc-icon>
186-
<igc-icon slot="suffix" [hidden]="hideSuffix()" name="favorite"></igc-icon>
202+
@if (!hideSuffix()) {
203+
<igc-icon slot="suffix" name="favorite"></igc-icon>
204+
}
187205
<span slot="helper-text">I am a Hint</span>
188206
<igc-select-item [value]="'Apple'" [disabled]="true">Apple</igc-select-item>
189207
<igc-select-item [value]="'Orange'" [selected]="getValue()">Orange</igc-select-item>
@@ -199,6 +217,10 @@ <h1 class="showcase__title">Web components</h1>
199217
[disabled]="isDisabled()"
200218
[style.--ig-size]="getSize()">
201219
<span slot="helper-text">I am a Hint</span>
220+
<igc-icon slot="prefix" [hidden]="hidePrefix()" name="favorite"></igc-icon>
221+
@if (!hideSuffix()) {
222+
<igc-icon slot="suffix" name="favorite"></igc-icon>
223+
}
202224
</igc-combo>
203225

204226

0 commit comments

Comments
 (0)