New to Kendo UI for Angular? Start a free 30-day trial

Removing Focus from First Item Upon Filtering in Kendo UI ComboBox for Angular

Environment

ProductProgress® Kendo UI for Angular ComboBox

Description

How to remove the focus from the first item when filtering the Kendo UI for Angular ComboBox?

Solution

To remove the focus from the first item in the ComboBox upon filtering, follow these steps:

  1. Handle the filterChange event of the ComboBox.

    <kendo-combobox
      #combobox
      (filterChange)="handleFilter($event)"
    >
    </kendo-combobox>
  2. To remove the focus from the first item in the list, use the focusItemAt method inside a setTimeout function.

    @ViewChild('combobox') public combobox;
    public handleFilter(value) {
      setTimeout(() => {
        this.combobox.focusItemAt();
      });
    }

The following example demonstrates the full implementation of the suggested approach.

{% meta height:350 %} {% embed_file combobox-remove-filter-focus/app.component.ts preview %} {% embed_file combobox-remove-filter-focus/app.module.ts %} {% embed_file shared/main.ts hidden %} {% endmeta %}

In this article

Not finding the help you need?