Skip to content

Commit e7be93c

Browse files
SisIvanovaSisIvanova
authored
fix(combo/select): remove suffix dynamically (#15956)
1 parent 5974ae7 commit e7be93c

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
@@ -22,7 +22,8 @@ import {
2222
QueryList,
2323
TemplateRef,
2424
ViewChild,
25-
DOCUMENT
25+
DOCUMENT,
26+
ViewChildren
2627
} from '@angular/core';
2728
import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
2829
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
@@ -285,7 +285,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
285285
}
286286

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

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

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

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

@@ -546,8 +550,15 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
546550
this.inputGroup.prefixes = this.prefixes;
547551
}
548552

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

‎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)