Hello,

Thank you for reaching out with your request to prevent free-text entry in the igx-simple-combo component while allowing only predefined list selections. Ignite UI Angular’s igx-simple-combo does support configurations to meet this requirement. Below is the recommended approach to ensure users can select only from the provided list without entering custom values.

Solution Overview

To achieve the desired behavior, we’ll leverage two main techniques:

1. Disable Custom Values: Set the allowCustomValues property to false to ensure that only values included in the data source can be selected.
2. Suppress Keyboard Input: Implement a handler for the (keydown) event to block any manual typing in the combo’s input field, which effectively prevents all custom or free-text entry.

This approach will ensure the combo acts similarly to the UltraWinCombo’s DropDownStyle = DropDownList mode, allowing users to select the nearest entry in the list without allowing free text entries.

Code Implementation

Below is the detailed code implementation using these techniques:

HTML Template

<igx-simple-combo
    [data]="items"                
    [(ngModel)]="selectedItem"   
    [allowCustomValues]="false"   
    (keydown)="preventInput($event)">
</igx-simple-combo>

Component TypeScript

In the TypeScript file, add a method to handle the keydown event, which will prevent any keyboard entry:

export class YourComponent {
    items = ["Item1", "Item2", "Item3"]; // Replace with actual data source
    selectedItem: string;
 
    preventInput(event: KeyboardEvent) {
        event.preventDefault(); // Blocks all keyboard input
    }
}

Explanation of Code

• allowCustomValues: By setting [allowCustomValues]="false", we disable the ability for users to add values that are not present in the items data array.
• keydown Event: The (keydown) event on the <igx-simple-combo> element calls the preventInput function every time a key is pressed. This function uses event.preventDefault() to suppress the default behavior, effectively blocking all keyboard input.

With this configuration, users will only be able to navigate and select values using the combo’s dropdown menu. Typing will automatically search for and select the closest matching entry.

Please feel free to reach out if you have any questions or would like further adjustments to this solution.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics