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

Environment

Product

Progress® 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.

   html

   <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.

   ts

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

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

Change Theme

Theme

Loading ...