[Input Group] Autocomplete background overlaps floating label with border type

[IG-Mori]

Description

A customer reported a display issue with browser autocomplete in Ignite UI for Angular 22.1.3.

When autocomplete is applied to an igx-input-group with type="border", the browser-generated input background overlaps and hides the floating label.

The issue does not occur with the default input group type.

The same behavior can be reproduced on the Input Group documentation page:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group

Environment

• Ignite UI for Angular: 22.1.3
• Browser: Google Chrome 153.0.8010.37

Framework

Angular

Angular Version

22.1.6

Ignite UI for Angular Version

22.1.3

Component / Area

Input Group

Browser

Chrome

Operating System

Windows

Steps to Reproduce

1. Open the Input Group documentation page in Google Chrome.
2. Enter and save a value that enables browser autocomplete.
3. Apply the autocomplete value to an input using igx-input-group with type="border".
4. Observe the floating label.

Actual Result

The autocomplete background overlaps and hides the floating label.

Expected Result

The floating label should remain visible when browser autocomplete is applied.

Reproduction URL

https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group

Attachments