[Select, Combo] - igx-input-group--suffixed class removed incorrectly when suffix is present via igx-select

[desig9stein]

Description

I am giving an example with the <Igx-select>, but the <Igx-combo> behaves the same way.

When using the <Igx-select>, a suffix icon (e.g., the toggle button) is always rendered inside the <igx-input-group> as a suffix. However, when all projected suffixes (igx-suffix, [igxSuffix]) are removed at runtime using @if , the.igx-input-group--suffixed class is also removed from the DOM—even though a suffix (the select toggle) is still present.

When using Angular's @if syntax to hide a <igx-suffix>, the .igx-input-group--suffixed class is removed. However, using [hidden] on a statically declared igx-suffix does work as expected.

✅ This works (.igx-input-group--suffixed class is preserved):

Edit
<igx-suffix [hidden]="hideSuffix()">
    <igx-icon>favorite</igx-icon>
</igx-suffix>

❌ This doesn't work
note: while it correctly hides the projected suffix, it also removes the .igx-input-group--suffixed class, which is incorrect because the select component has a permanent suffix in the form of a toggle button.

@if (hideSuffix()) {
    <igx-suffix>
        <igx-icon>favorite</igx-icon>
    </igx-suffix>
}

• igniteui-angular version: All
• browser: All

Steps to reproduce

1. Use <igx-select> with a custom igx-suffix projected into the component.

2. Remove the projected igx-suffix at runtime (e.g., via @if).

3. Observe that the .igx-input-group--suffixed class is removed from the .igx-input-group.
   Even though the toggle suffix is always rendered by the select, the class is gone.

Result

The class .igx-input-group--suffixed is removed when projected suffixes are removed, ignoring the always-present suffix defined inside the <igx-select>

Expected result

If the <igx-select> permanently renders a suffix (e.g., a toggle button), the .igx-input-group--suffixed class should not be removed, even if projected suffixes are removed dynamically.

Attachments

This leads to incorrect layout/styling because the input group visually behaves as if there is no suffix, despite the internal one being rendered.

Screen.Recording.2025-05-05.at.9.42.51.mov