@progress/kendo-angular-dropdowns 11.0.0-develop.93 → 11.0.0-develop.95

package/common/util.d.ts

@@ -173,3 +173,18 @@ export declare const isSafari: (userAgent: any) => boolean;
  * Checks if input is Japanese IME
  */
 export declare const isJapanese: (input: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const isLetter: (text: string) => boolean;
+/**
+ * @hidden
+ */
+export declare const getTextField: (field: string | string[], level: number) => string;
+/**
+ * @hidden
+ */
+export declare const getSearchableItems: (popupId: string, popupElement: HTMLElement) => {
+    text: string;
+    index: string;
+}[];

package/dropdowntrees/dropdowntree.component.d.ts

@@ -399,7 +399,10 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private _size;
     private _rounded;
     private _fillMode;
-    private subscriptions;
+    private _searchableNodes;
+    private _typedValue;
+    private printableCharacters;
+    private subs;
     private touchstartDisposeHandler;
     constructor(injector: Injector, wrapper: ElementRef<HTMLElement>, popupService: PopupService, navigationService: NavigationService, renderer: Renderer2, _zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService, touchEnabled: boolean);
     ngOnInit(): void;
@@ -520,6 +523,10 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     protected verifySettings(): void;
     private emitValueChange;
     private getText;
+    /**
+     * @hidden
+     */
+    onChildrenLoaded(): void;
     /**
      * @hidden
      *

package/dropdowntrees/multiselecttree.component.d.ts

@@ -446,7 +446,10 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private _size;
     private _rounded;
     private _fillMode;
-    private subscriptions;
+    private _searchableNodes;
+    private _typedValue;
+    private printableCharacters;
+    private subs;
     private lastNodeOnFocus;
     private isContentInit;
     constructor(injector: Injector, wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, lookup: MultiSelectTreeLookupService, touchEnabled: boolean);
@@ -600,6 +603,10 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private setState;
     private setTags;
     private updateValue;
+    /**
+     * @hidden
+     */
+    onChildrenLoaded(): void;
     /**
      * @hidden
      *

package/esm2020/common/util.mjs

@@ -346,3 +346,29 @@ export const isJapanese = (input) => {
     const japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
     return japaneseRegex.test(input);
 };
+/**
+ * @hidden
+ */
+export const isLetter = (text) => {
+    const isLetter = /[a-zA-Z]/;
+    return isLetter.test(text) && text?.length === 1;
+};
+/**
+ * @hidden
+ */
+export const getTextField = (field, level) => {
+    if (isArray(field)) {
+        return field[level];
+    }
+    return field;
+};
+/**
+ * @hidden
+ */
+export const getSearchableItems = (popupId, popupElement) => {
+    const nodeSeletor = `kendo-popup[id='${popupId}'] li.k-treeview-item`;
+    const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
+    return liElements.map((liElement) => {
+        return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
+    });
+};

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -14,10 +14,10 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
-import { getFillModeClass, getRoundedClass, getSizeClass, inDropDown, isArray, isPresent, isUntouched, noop } from '../common/util';
+import { getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, inDropDown, isArray, isLetter, isPresent, isUntouched, noop } from '../common/util';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
-import { of } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { of, Subject, Subscription } from 'rxjs';
+import { debounceTime, tap } from 'rxjs/operators';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
 import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
 import { NodeTemplateDirective } from './templates/node-template.directive';
@@ -212,7 +212,10 @@ export class DropDownTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -266,6 +269,9 @@ export class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         this.navigationService.process({
             originalEvent: eventData
@@ -515,9 +521,20 @@ export class DropDownTreeComponent {
         return ngControl?.control || null;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus?.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
+            htmlItem?.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -816,6 +833,16 @@ export class DropDownTreeComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -872,6 +899,7 @@ export class DropDownTreeComponent {
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -913,33 +941,41 @@ export class DropDownTreeComponent {
         this.selectedKeys = [];
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.close.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(false);
-            this.focus();
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), this.navigationService.esc
-            .subscribe(() => this.handleEscape()), this.navigationService.tab.subscribe(() => this.focus()), this.navigationService.down.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (!this.treeview.isActive) {
-                this.treeview.focus();
-            }
-        }), this.navigationService.up.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
-                this.filterInput.nativeElement.focus();
-            }
-        }));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.close.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(false);
+                this.focus();
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            this.navigationService.esc
+                .subscribe(() => this.handleEscape()),
+            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.down.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (!this.treeview.isActive) {
+                    this.treeview.focus();
+                }
+            }),
+            this.navigationService.up.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
+                    this.filterInput.nativeElement.focus();
+                }
+            })
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -978,7 +1014,7 @@ export class DropDownTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
@@ -1163,6 +1199,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -1345,6 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -16,7 +16,7 @@ import { PreventableEvent } from '../common/models/preventable-event';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { RemoveTagEvent } from '../common/models/remove-tag-event';
 import { MultiSelectTreeMessages } from '../common/constants/error-messages';
-import { fetchDescendentNodes, getFillModeClass, getRoundedClass, getSizeClass, hasProps, isArray, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
+import { fetchDescendentNodes, getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, hasProps, isArray, isLetter, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
 import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
 import { NodeTemplateDirective } from './templates/node-template.directive';
@@ -24,8 +24,8 @@ import { NoDataTemplateDirective } from '../common/templates/no-data-template.di
 import { TagTemplateDirective } from '../common/templates/tag-template.directive';
 import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
-import { merge, of } from 'rxjs';
-import { filter, tap } from 'rxjs/operators';
+import { merge, of, Subject, Subscription } from 'rxjs';
+import { debounceTime, filter, tap } from 'rxjs/operators';
 import { buildTreeItem, MultiSelectTreeLookupService, nodeIndex } from './lookup/lookup.service';
 import { searchIcon, xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
@@ -241,7 +241,10 @@ export class MultiSelectTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -310,6 +313,9 @@ export class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         const action = this.navigationService.process({
             originalEvent: eventData
@@ -640,9 +646,20 @@ export class MultiSelectTreeComponent {
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus?.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
+            htmlItem?.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -1049,9 +1066,11 @@ export class MultiSelectTreeComponent {
         popupWrapper.style.height = this.height;
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -1074,20 +1093,33 @@ export class MultiSelectTreeComponent {
         }
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.focus();
-            this.togglePopup(false);
-        }), this.navigationService.tab.subscribe(this.handleTabKey.bind(this)), this.navigationService.up.subscribe(this.handleUpKey.bind(this)), this.navigationService.down.subscribe(this.handleDownKey.bind(this)), this.navigationService.left
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)), this.navigationService.right
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this)));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.focus();
+                this.togglePopup(false);
+            }),
+            this.navigationService.tab.subscribe(this.handleTabKey.bind(this)),
+            this.navigationService.up.subscribe(this.handleUpKey.bind(this)),
+            this.navigationService.down.subscribe(this.handleDownKey.bind(this)),
+            this.navigationService.left
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)),
+            this.navigationService.right
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)),
+            this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)),
+            this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)),
+            this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)),
+            this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this))
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeFocusEvents() {
         if (isDocumentAvailable()) {
@@ -1218,7 +1250,7 @@ export class MultiSelectTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
     }
     /**
@@ -1253,6 +1285,16 @@ export class MultiSelectTreeComponent {
         this.value = newValue;
         this.emitValueChange(this.value);
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -1503,6 +1545,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -1718,6 +1761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673265672,
+    publishDate: 1673435278,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2015/progress-kendo-angular-dropdowns.mjs

@@ -19,7 +19,7 @@ import { PopupModule } from '@progress/kendo-angular-popup';
 export { PopupComponent } from '@progress/kendo-angular-popup';
 import * as i8 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil } from 'rxjs/operators';
+import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
 import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@progress/kendo-angular-treeview';
@@ -32,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673265672,
+    publishDate: 1673435278,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -379,6 +379,32 @@ const isJapanese = (input) => {
     const japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
     return japaneseRegex.test(input);
 };
+/**
+ * @hidden
+ */
+const isLetter = (text) => {
+    const isLetter = /[a-zA-Z]/;
+    return isLetter.test(text) && (text === null || text === void 0 ? void 0 : text.length) === 1;
+};
+/**
+ * @hidden
+ */
+const getTextField = (field, level) => {
+    if (isArray(field)) {
+        return field[level];
+    }
+    return field;
+};
+/**
+ * @hidden
+ */
+const getSearchableItems = (popupId, popupElement) => {
+    const nodeSeletor = `kendo-popup[id='${popupId}'] li.k-treeview-item`;
+    const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
+    return liElements.map((liElement) => {
+        return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
+    });
+};
 
 /**
  * @hidden
@@ -10437,7 +10463,10 @@ class DropDownTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -10491,6 +10520,9 @@ class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         this.navigationService.process({
             originalEvent: eventData
@@ -10740,9 +10772,20 @@ class DropDownTreeComponent {
         return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus === null || itemToFocus === void 0 ? void 0 : itemToFocus.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus === null || itemToFocus === void 0 ? void 0 : itemToFocus.index}']`);
+            htmlItem === null || htmlItem === void 0 ? void 0 : htmlItem.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -11041,6 +11084,16 @@ class DropDownTreeComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -11097,6 +11150,7 @@ class DropDownTreeComponent {
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -11138,33 +11192,41 @@ class DropDownTreeComponent {
         this.selectedKeys = [];
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.close.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(false);
-            this.focus();
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), this.navigationService.esc
-            .subscribe(() => this.handleEscape()), this.navigationService.tab.subscribe(() => this.focus()), this.navigationService.down.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (!this.treeview.isActive) {
-                this.treeview.focus();
-            }
-        }), this.navigationService.up.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
-                this.filterInput.nativeElement.focus();
-            }
-        }));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.close.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(false);
+                this.focus();
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            this.navigationService.esc
+                .subscribe(() => this.handleEscape()),
+            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.down.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (!this.treeview.isActive) {
+                    this.treeview.focus();
+                }
+            }),
+            this.navigationService.up.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
+                    this.filterInput.nativeElement.focus();
+                }
+            })
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -11203,7 +11265,7 @@ class DropDownTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
@@ -11388,6 +11450,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -11570,6 +11633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -12386,7 +12450,10 @@ class MultiSelectTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -12456,6 +12523,9 @@ class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         const action = this.navigationService.process({
             originalEvent: eventData
@@ -12786,9 +12856,20 @@ class MultiSelectTreeComponent {
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus === null || itemToFocus === void 0 ? void 0 : itemToFocus.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus === null || itemToFocus === void 0 ? void 0 : itemToFocus.index}']`);
+            htmlItem === null || htmlItem === void 0 ? void 0 : htmlItem.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -13191,9 +13272,11 @@ class MultiSelectTreeComponent {
         popupWrapper.style.height = this.height;
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -13216,20 +13299,33 @@ class MultiSelectTreeComponent {
         }
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.focus();
-            this.togglePopup(false);
-        }), this.navigationService.tab.subscribe(this.handleTabKey.bind(this)), this.navigationService.up.subscribe(this.handleUpKey.bind(this)), this.navigationService.down.subscribe(this.handleDownKey.bind(this)), this.navigationService.left
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)), this.navigationService.right
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this)));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.focus();
+                this.togglePopup(false);
+            }),
+            this.navigationService.tab.subscribe(this.handleTabKey.bind(this)),
+            this.navigationService.up.subscribe(this.handleUpKey.bind(this)),
+            this.navigationService.down.subscribe(this.handleDownKey.bind(this)),
+            this.navigationService.left
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)),
+            this.navigationService.right
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)),
+            this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)),
+            this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)),
+            this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)),
+            this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this))
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeFocusEvents() {
         if (isDocumentAvailable()) {
@@ -13360,7 +13456,7 @@ class MultiSelectTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
     }
     /**
@@ -13395,6 +13491,16 @@ class MultiSelectTreeComponent {
         this.value = newValue;
         this.emitValueChange(this.value);
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -13645,6 +13751,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -13860,6 +13967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->

package/fesm2020/progress-kendo-angular-dropdowns.mjs

@@ -16,7 +16,7 @@ import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 export { PopupComponent } from '@progress/kendo-angular-popup';
-import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil } from 'rxjs/operators';
+import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
 import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { xIcon, caretAltDownIcon, searchIcon, xCircleIcon, plusIcon } from '@progress/kendo-svg-icons';
@@ -32,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673265672,
+    publishDate: 1673435278,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -379,6 +379,32 @@ const isJapanese = (input) => {
     const japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
     return japaneseRegex.test(input);
 };
+/**
+ * @hidden
+ */
+const isLetter = (text) => {
+    const isLetter = /[a-zA-Z]/;
+    return isLetter.test(text) && text?.length === 1;
+};
+/**
+ * @hidden
+ */
+const getTextField = (field, level) => {
+    if (isArray(field)) {
+        return field[level];
+    }
+    return field;
+};
+/**
+ * @hidden
+ */
+const getSearchableItems = (popupId, popupElement) => {
+    const nodeSeletor = `kendo-popup[id='${popupId}'] li.k-treeview-item`;
+    const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
+    return liElements.map((liElement) => {
+        return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
+    });
+};
 
 /**
  * @hidden
@@ -10426,7 +10452,10 @@ class DropDownTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -10480,6 +10509,9 @@ class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         this.navigationService.process({
             originalEvent: eventData
@@ -10729,9 +10761,20 @@ class DropDownTreeComponent {
         return ngControl?.control || null;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus?.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
+            htmlItem?.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -11030,6 +11073,16 @@ class DropDownTreeComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -11086,6 +11139,7 @@ class DropDownTreeComponent {
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -11127,33 +11181,41 @@ class DropDownTreeComponent {
         this.selectedKeys = [];
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.close.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(false);
-            this.focus();
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), this.navigationService.esc
-            .subscribe(() => this.handleEscape()), this.navigationService.tab.subscribe(() => this.focus()), this.navigationService.down.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (!this.treeview.isActive) {
-                this.treeview.focus();
-            }
-        }), this.navigationService.up.subscribe((event) => {
-            if (!this.treeview) {
-                return;
-            }
-            event.originalEvent.preventDefault();
-            if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
-                this.filterInput.nativeElement.focus();
-            }
-        }));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.close.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(false);
+                this.focus();
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            this.navigationService.esc
+                .subscribe(() => this.handleEscape()),
+            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.down.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (!this.treeview.isActive) {
+                    this.treeview.focus();
+                }
+            }),
+            this.navigationService.up.subscribe((event) => {
+                if (!this.treeview) {
+                    return;
+                }
+                event.originalEvent.preventDefault();
+                if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
+                    this.filterInput.nativeElement.focus();
+                }
+            })
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -11192,7 +11254,7 @@ class DropDownTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
@@ -11377,6 +11439,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -11559,6 +11622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (selectionChange)="onSelectionChange($event)"
                 (expand)="nodeExpand.emit($event)"
                 (collapse)="nodeCollapse.emit($event)"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -12373,7 +12437,10 @@ class MultiSelectTreeComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.subscriptions = [];
+        this._searchableNodes = [];
+        this._typedValue = '';
+        this.printableCharacters = new Subject();
+        this.subs = new Subscription();
         this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
@@ -12442,6 +12509,9 @@ class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
+        }
         const eventData = event;
         const action = this.navigationService.process({
             originalEvent: eventData
@@ -12772,9 +12842,20 @@ class MultiSelectTreeComponent {
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
     ngOnInit() {
+        this.subs.add(this.printableCharacters.pipe(tap((char) => {
+            this._typedValue += char;
+            const itemToFocus = this._searchableNodes.find((node) => {
+                return node.text.toLowerCase().indexOf(this._typedValue) === 0;
+            });
+            this.treeview.focus(itemToFocus?.index);
+            const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
+            htmlItem?.scrollIntoView();
+        }), debounceTime(1000)).subscribe(() => {
+            this._typedValue = '';
+        }));
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
-        this.subscriptions.push(this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
@@ -13181,9 +13262,11 @@ class MultiSelectTreeComponent {
         popupWrapper.style.height = this.height;
         this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
+        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
+            this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
         });
         this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
@@ -13206,20 +13289,33 @@ class MultiSelectTreeComponent {
         }
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.togglePopup(true);
-        }), this.navigationService.enter
-            .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
-            event.originalEvent.preventDefault();
-            this.focus();
-            this.togglePopup(false);
-        }), this.navigationService.tab.subscribe(this.handleTabKey.bind(this)), this.navigationService.up.subscribe(this.handleUpKey.bind(this)), this.navigationService.down.subscribe(this.handleDownKey.bind(this)), this.navigationService.left
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)), this.navigationService.right
-            .pipe(filter(() => !this.isTreeViewActive))
-            .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this)));
+        [
+            this.navigationService.open.subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.togglePopup(true);
+            }),
+            this.navigationService.enter
+                .pipe(tap((event) => event.originalEvent.preventDefault()))
+                .subscribe(() => this.togglePopup(true)),
+            merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
+                event.originalEvent.preventDefault();
+                this.focus();
+                this.togglePopup(false);
+            }),
+            this.navigationService.tab.subscribe(this.handleTabKey.bind(this)),
+            this.navigationService.up.subscribe(this.handleUpKey.bind(this)),
+            this.navigationService.down.subscribe(this.handleDownKey.bind(this)),
+            this.navigationService.left
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)),
+            this.navigationService.right
+                .pipe(filter(() => !this.isTreeViewActive))
+                .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)),
+            this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)),
+            this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)),
+            this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)),
+            this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this))
+        ].forEach(sub => this.subs.add(sub));
     }
     subscribeFocusEvents() {
         if (isDocumentAvailable()) {
@@ -13350,7 +13446,7 @@ class MultiSelectTreeComponent {
         }
     }
     unsubscribeEvents() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subs.unsubscribe();
         this.unSubscribeFocusEvents();
     }
     /**
@@ -13385,6 +13481,16 @@ class MultiSelectTreeComponent {
         this.value = newValue;
         this.emitValueChange(this.value);
     }
+    /**
+     * @hidden
+     */
+    onChildrenLoaded() {
+        setTimeout(() => {
+            if (this.popupRef) {
+                this._searchableNodes = getSearchableItems(this._popupId, this.popupRef.popupElement);
+            }
+        });
+    }
     /**
      * @hidden
      *
@@ -13635,6 +13741,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->
@@ -13850,6 +13957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     focusout: handleBlur
                 }"
                 [scope]="this"
+                (childrenLoaded)="onChildrenLoaded()"
             >
             </kendo-treeview>
             <!--footer template-->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "11.0.0-develop.93",
+  "version": "11.0.0-develop.95",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,14 +25,14 @@
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-common": "^0.2.1",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.0.0-develop.93",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.93",
-    "@progress/kendo-angular-popup": "11.0.0-develop.93",
-    "@progress/kendo-angular-icons": "11.0.0-develop.93",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.93",
-    "@progress/kendo-angular-treeview": "11.0.0-develop.93",
+    "@progress/kendo-angular-common": "11.0.0-develop.95",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.95",
+    "@progress/kendo-angular-popup": "11.0.0-develop.95",
+    "@progress/kendo-angular-icons": "11.0.0-develop.95",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.95",
+    "@progress/kendo-angular-treeview": "11.0.0-develop.95",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-label": "11.0.0-develop.93"
+    "@progress/kendo-angular-label": "11.0.0-develop.95"
   },
   "dependencies": {
     "tslib": "^2.3.1"