Description

When binding an array of values to the igx-combo and programmatically setting selected values that include non-existent items, the combo displays all values, including the invalid ones, in a comma-separated string. The expected behavior is that only the matched values in the bound array should be shown in the combo.

• igniteui-angular version: 17.2 18.1 master
• browser: all

Steps to reproduce

1. Bind an array of values to the igx-combo.
2. Programmatically set a list of selected values that includes some which are not part of the bound data.
3. Observe the combo box after the selection is applied.

Result

The igx-combo shows all the selected values, including ones that are not present in the bound array, in a comma-separated format.

Expected result

Only the values that match the data bound to the combo should appear in the selection, and the invalid values should be ignored or handled.

Enhancement Note

This is more of an enhancement request

This issue isn't a bug per se but more of an enhancement request. The current behavior is expected since the API selects values as provided, even if they aren't part of the bound data. However, it would be ideal if the combo box could automatically filter out invalid values to improve user experience and data accuracy.

Attachments

<div class="sample-wrapper">
  <div class="combo-section">
    <igx-combo class="combo" #withValueKey [data]="cities" valueKey="id" displayKey="name" groupKey="country"
        [(ngModel)]="selectedValueKey">
    </igx-combo>
    <button igxButton="contained" (click)="selectValues()">Set Values</button>
  </div>
  <h6>Selected Cities:</h6>
  <div>{{ selectedValueKey }}</div>
</div>

public cities = [{
    name: 'Sofia',
    id: 'BG01',
    country: 'Bulgaria'
  }, {
    name: 'Plovdiv',
    id: 'BG02',
    country: 'Bulgaria'
  }];

public selectedValueKey = [];

// This method sets values, some of which do not exist in the bound data
public selectValues() {
   this.selectedValueKey = ['UK01', 'JP01', 'DE01', 'BG01'];  // Non-existent values
}