Hello,

I have been looking into your additional question, and what I can suggest is passing the input group and dropdown as parameters to the iconClick method. Then, inside the method, you should use the dropdown’s open/close methods, depending on its collapsed state.

Additionally, to display the dropdown below the input group, you should configure the dropdown’s overlay settings and pass them to the open method. Also, to adjust the dropdown’s width according to the input width, you can get the input group element’s clientWidth and assign it to the dropdown element’s style.

For example:

<ng-template igxCell let-cell="cell">
    <igx-input-group [type]="'border'" #inputGroup >
        <input
            igxInput
            name="town"
            type="text"
            [igxAutocomplete]="dropdown"
            [(ngModel)]="cell.value"
        />
        <igx-suffix class="igx-combo__toggle-button" (click)="iconClick(inputGroup, dropdown)">
            <igx-icon class="material-icons igx-icon" aria-hidden="true">
                {{ dropdown.collapsed ? 'expand_more' : 'expand_less' }}
            </igx-icon>
        </igx-suffix>
    </igx-input-group>
    <igx-drop-down #dropdown>
        <div class="drop-down__scroll-container">
            @for (town of cities | startsWith:cell.value; track town) {
                <igx-drop-down-item [value]="town.name" style="height: 28px">
                    {{ town.name }}
                </igx-drop-down-item>
            }
        </div>
    </igx-drop-down>
</ng-template>

public iconClick(
    inputGroup: IgxInputGroupComponent,
    dropdown: IgxDropDownComponent
) {
    const inputGroupElement = inputGroup.element.nativeElement;
    const settings: OverlaySettings = {
        target: inputGroupElement,
        closeOnOutsideClick: false,
    };
    Object.assign(dropdown.element.style, {
        width: `${inputGroupElement.clientWidth}px`,
    });
    dropdown.collapsed ? dropdown.open(settings) : dropdown.close();
}

Hello,

I have been looking into your additional questions, and what I can say is that this behavior is by default, as the IgxSimpleCombo’s input is used both for filtering the values and displaying the selection. However, if there is no valid selection, blurring the combo’s input will clear the entered value, and this is the expected behavior.

For styling the autocomplete, the approach is similar to the IgxSimpleCombo in terms of setting the height. To change the colors, you should wrap the igx-drop-down-item components in a div element and set a custom class. Then, for this class, you should include the custom dropdown theme.

I believe that you will find the following topics quite helpful in customizing the IgxAutoComplete.

Hello:

    Thanks for the help.

     What i am trying to do is a editable-dropdown, which is similar to autocomplete.

    I do notice the igx-simple-combo will lose its value, once i try to click on it and onBlur(), eg: use this in athletesData

CountryName: 'California',

   Is there anyway to retain it after onBlur()?