Focusing the First Option After MultiSelect Popup Opens

Updated on Jul 7, 2026

Environment

Product	Kendo UI for jQuery MultiSelect
Version	2026.2.520

Description

I want the first option in the Kendo UI for jQuery MultiSelect to automatically gain focus when the popup opens. Currently, the last selected item is focused.

This knowledge base article also answers the following questions:

• How to set focus to the first item in the MultiSelect popup?
• Why is the first option not focused when the MultiSelect popup opens?
• How to make navigation start from the first item in MultiSelect?

Solution

To focus the first option in the MultiSelect popup when it opens, handle the open event. Use a small timeout to ensure the popup is fully rendered, and programmatically set the first item as the current one.

1. Attach an open event handler to the MultiSelect.
2. In the handler, ensure all list items are cleared of focus and hover states.
3. Set the first item as the current one.

Below is a runnable example:

<div class="k-d-flex k-justify-content-center" style="padding-top: 54px">
      <div class="k-w-300">
        <label for="products">Products</label>
        <select id="products"></select>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        $("#products").kendoMultiSelect({
          placeholder: "Select products...",
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          placeholder: "Type to search...",
          minLength: 3,
          filter: "contains",
          autoClose: false,
          clearButton: true,
          highlightFirst : true,
          dataSource: {
            type: "odata-v4",
            transport: {
              read: {
                url: "https://demos.telerik.com/service/v2/odata/Products",
              },
            },
          },
          open: function (e) {
            var ms = this;
            setTimeout(function () {
              var list = ms.list;
              if (!list || !list.length) {
                return;
              }
              // Remove focus/hover from all items
              list.find("li").removeClass("k-focus k-hover");
              var firstItem = list.find("li.k-list-item:first");
              if (firstItem.length) {
                ms.current(firstItem);
              }
            }, 0);
          },
        });
      });
    </script>

See Also

• Kendo UI for jQuery MultiSelect Documentation
• Kendo UI for jQuery MultiSelect API Reference
• Kendo UI for jQuery MultiSelect Overview (Demo)