From 9cbd329dab9d56f837cacb808f9a22ae5a79030b Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 19 Jun 2025 11:50:52 +0300
Subject: [PATCH] fix(combo/select): remove suffix dynamically

---
 .../src/lib/combo/combo.common.ts               | 17 ++++++++++++++---
 .../lib/input-group/input-group.component.ts    |  2 +-
 .../src/lib/select/select.component.ts          | 15 +++++++++++++--
 .../input-group-showcase.sample.ts              |  2 +-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts
index 0b3f69cdd58..1221e1f43ed 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.common.ts
+++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts
@@ -21,7 +21,8 @@ import {
     Output,
     QueryList,
     TemplateRef,
-    ViewChild
+    ViewChild,
+    ViewChildren
 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
 import { caseSensitive } from '@igniteui/material-icons-extended';
@@ -748,6 +749,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     @ContentChildren(IgxSuffixDirective, { descendants: true })
     protected suffixes: QueryList<IgxSuffixDirective>;
 
+    @ViewChildren(IgxSuffixDirective)
+    protected internalSuffixes: QueryList<IgxSuffixDirective>;
+
     /** @hidden @internal */
     public get searchValue(): string {
         return this._searchValue;
@@ -984,8 +988,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
             this.inputGroup.prefixes = this.prefixes;
         }
 
-        if (this.inputGroup && this.suffixes?.length > 0) {
-            this.inputGroup.suffixes = this.suffixes;
+        if (this.inputGroup) {
+            const suffixesArray = this.suffixes?.toArray() ?? [];
+            const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];
+            const mergedSuffixes = new QueryList<IgxSuffixDirective>();
+            mergedSuffixes.reset([
+                ...suffixesArray,
+                ...internalSuffixesArray
+            ]);
+            this.inputGroup.suffixes = mergedSuffixes;
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 589c133bd8f..7a1de700776 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -291,7 +291,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
     }
 
     /** @hidden @internal */
-    public set suffixes(items: QueryList<IgxPrefixDirective>) {
+    public set suffixes(items: QueryList<IgxSuffixDirective>) {
         this._suffixes = items;
     }
 
diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts
index 9047896d7ab..9965c2e2240 100644
--- a/projects/igniteui-angular/src/lib/select/select.component.ts
+++ b/projects/igniteui-angular/src/lib/select/select.component.ts
@@ -22,6 +22,7 @@ import {
     QueryList,
     TemplateRef,
     ViewChild,
+    ViewChildren,
     ViewEncapsulation
 } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
@@ -120,6 +121,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     @ContentChildren(IgxSuffixDirective, { descendants: true })
     protected suffixes: QueryList<IgxSuffixDirective>;
 
+    @ViewChildren(IgxSuffixDirective)
+    protected internalSuffixes: QueryList<IgxSuffixDirective>;
+
     /** @hidden @internal */
     @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;
 
@@ -542,8 +546,15 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
             this.inputGroup.prefixes = this.prefixes;
         }
 
-        if (this.inputGroup && this.suffixes?.length > 0) {
-            this.inputGroup.suffixes = this.suffixes;
+        if (this.inputGroup) {
+            const suffixesArray = this.suffixes?.toArray() ?? [];
+            const internalSuffixesArray = this.internalSuffixes?.toArray() ?? [];
+            const mergedSuffixes = new QueryList<IgxSuffixDirective>();
+            mergedSuffixes.reset([
+                ...suffixesArray,
+                ...internalSuffixesArray
+            ]);
+            this.inputGroup.suffixes = mergedSuffixes;
         }
     }
 
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts
index 5416f1d350f..5dab7ef8366 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.ts
+++ b/src/app/input-group-showcase/input-group-showcase.sample.ts
@@ -133,7 +133,7 @@ export class InputGroupShowcaseSampleComponent {
             }
         },
         hideSuffix: {
-            label: 'Hide Suffix using( [hidden] )',
+            label: 'Hide Suffix',
             control: {
                 type: 'boolean',
                 defaultValue: false