[Input Group] Invalid style shown while an async validator is pending

[viktorkombov]

Description

While an async validator is running, the control status is PENDING, but igxInput shows the invalid state and style. The user sees an error before validation has finished. Happens on master.

Framework

Angular

Angular Version

22.1.x

Ignite UI for Angular Version

22.2.x

Component / Area

Input Group

Browser

Chrome

Operating System

Windows

Command Not Working

No response

Steps to Reproduce

1. Add the following to a dev sample:

public form = new FormGroup({
    name: new FormControl('', {
        validators: [Validators.maxLength(100)],
        asyncValidators: () => new Promise(resolve => setTimeout(() => resolve(null), 2000))
    })
});

<form [formGroup]="form">
    <igx-input-group>
        <input igxInput formControlName="name" />
    </igx-input-group>
</form>

2. Run the sample.
3. Type into the input and blur it.
4. Watch the input during the 2 seconds the async validator runs.

Actual Result

The input shows the invalid style while the status is PENDING.

Expected Result

The input stays in its normal state while pending and only shows the invalid style if the validator returns errors.

Reproduction URL

No response

Attachments

No response