@progress/kendo-angular-dropdowns 11.0.0-develop.111 → 11.0.0-develop.113

package/dropdowntrees/dropdowntree.component.d.ts

@@ -62,14 +62,6 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     get isAriaExpanded(): boolean;
     get hostAriaAutocomplete(): string;
     get isReadonly(): string;
-    /**
-     * @hidden
-     */
-    handleClick(): void;
-    /**
-     * @hidden
-     */
-    handleKeydown(event: any): void;
     noDataTemplate: NoDataTemplateDirective;
     headerTemplate: HeaderTemplateDirective;
     footerTemplate: FooterTemplateDirective;
@@ -311,6 +303,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      */
     get isOpen(): boolean;
     get clearButtonVisiblity(): string;
+    private get isFilterActive();
     popupRef: PopupRef;
     /**
      * @hidden
@@ -404,6 +397,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private printableCharacters;
     private subs;
     private touchstartDisposeHandler;
+    private lastNodeOnFocus;
     constructor(injector: Injector, wrapper: ElementRef<HTMLElement>, popupService: PopupService, navigationService: NavigationService, renderer: Renderer2, _zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService, touchEnabled: boolean);
     ngOnInit(): void;
     /**
@@ -418,6 +412,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      * @hidden
      */
     ngAfterContentChecked(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      *
@@ -437,6 +432,10 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      * @hidden
      */
     handleBlur(e?: FocusEvent): void;
+    /**
+     * @hidden
+     */
+    handleKeydown(event: any): void;
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
      * The targeted item should be expanded in order for it to be focused.
@@ -538,6 +537,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private triggerPopupEvents;
     private createPopup;
     private destroyPopup;
+    private handleClick;
     private handleEscape;
     private setState;
     private clearState;
@@ -549,6 +549,11 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private handleDocumentBlur;
     private assignAriaDescribedBy;
     private setComponentClasses;
+    /**
+     * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
+     * and the user will not be able to tab to the rest of the browser elements
+     */
+    private removeTreeViewFromTabOrder;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownTreeComponent, [null, null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DropDownTreeComponent, "kendo-dropdowntree", ["kendoDropDownTree"], { "loading": "loading"; "clearButton": "clearButton"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "valueDepth": "valueDepth"; "hasChildren": "hasChildren"; "fetchChildren": "fetchChildren"; "placeholder": "placeholder"; "popupSettings": "popupSettings"; "dataItem": "dataItem"; "listHeight": "listHeight"; "disabled": "disabled"; "readonly": "readonly"; "valuePrimitive": "valuePrimitive"; "tabindex": "tabindex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "itemDisabled": "itemDisabled"; "isNodeExpanded": "isNodeExpanded"; "isNodeVisible": "isNodeVisible"; "loadOnDemand": "loadOnDemand"; "filterable": "filterable"; "filter": "filter"; "focusableId": "focusableId"; }, { "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; "filterChange": "filterChange"; }, ["noDataTemplate", "headerTemplate", "footerTemplate", "nodeTemplate", "valueTemplate"], never>;
 }

package/dropdowntrees/multiselecttree.component.d.ts

@@ -69,10 +69,6 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @hidden
      */
     get formControl(): FormControl;
-    /**
-     * @hidden
-     */
-    handleClick(): void;
     /**
      * @hidden
      */
@@ -454,6 +450,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private isContentInit;
     constructor(injector: Injector, wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, lookup: MultiSelectTreeLookupService, touchEnabled: boolean);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -581,6 +578,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private triggerPopupEvents;
     private createPopup;
     private destroyPopup;
+    private handleClick;
     private subscribeEvents;
     private subscribeFocusEvents;
     private unSubscribeFocusEvents;

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject, HostListener, Injector } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject, Injector } from '@angular/core';
 import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
@@ -256,27 +256,6 @@ export class DropDownTreeComponent {
     get isReadonly() {
         return this.readonly ? '' : null;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        if (isLetter(event.key)) {
-            this.printableCharacters.next(event.key);
-        }
-        const eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    }
     set treeview(treeview) {
         if (treeview) {
             if (this.isFocused && !this.filterable || this.touchEnabled) {
@@ -447,6 +426,9 @@ export class DropDownTreeComponent {
             return 'visible';
         }
     }
+    get isFilterActive() {
+        return this.filterInput && document.activeElement === this.filterInput.nativeElement;
+    }
     /**
      * @hidden
      *
@@ -562,6 +544,10 @@ export class DropDownTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    ngAfterViewInit() {
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+    }
     /**
      * @hidden
      *
@@ -617,17 +603,29 @@ export class DropDownTreeComponent {
             return;
         }
         this.isFocused = false;
+        this.togglePopup(false);
         if (hasObservers(this.onBlur) ||
             isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
-                this.togglePopup(false);
                 this.onBlur.emit();
                 this.onTouchedCallback();
             });
         }
-        else {
-            this.togglePopup(false);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (!this.isFilterActive && isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
         }
+        const eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
     }
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
@@ -920,6 +918,14 @@ export class DropDownTreeComponent {
             }
         }
     }
+    handleClick(e) {
+        // The check is needed otherwise when appended to the component, the popup reopens on click
+        // https://github.com/telerik/kendo-angular/issues/3738        
+        if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
+            || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
+            this.togglePopup(!this.isOpen);
+        }
+    }
     handleEscape() {
         this.togglePopup(false);
         this.focus();
@@ -953,10 +959,25 @@ export class DropDownTreeComponent {
             }),
             this.navigationService.enter
                 .pipe(tap((event) => event.originalEvent.preventDefault()))
-                .subscribe(() => this.togglePopup(true)),
+                .subscribe((e) => {
+                // The check is needed otherwise when appended to the component, the popup reopens on click
+                // https://github.com/telerik/kendo-angular/issues/3738     
+                if (e.originalEvent.target === this.wrapper.nativeElement) {
+                    this.togglePopup(true);
+                }
+                if (!this.isOpen) {
+                    this.focus();
+                }
+            }),
             this.navigationService.esc
                 .subscribe(() => this.handleEscape()),
-            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.tab.subscribe(() => {
+                this.focus();
+                if (this.isOpen) {
+                    this.treeview.blur();
+                    this.removeTreeViewFromTabOrder();
+                }
+            }),
             this.navigationService.down.subscribe((event) => {
                 if (!this.treeview) {
                     return;
@@ -1044,9 +1065,22 @@ export class DropDownTreeComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
+    /**
+     * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
+     * and the user will not be able to tab to the rest of the browser elements
+     */
+    removeTreeViewFromTabOrder() {
+        const nodes = this.treeview.element.nativeElement.querySelectorAll('li');
+        nodes.forEach(item => {
+            if (item.getAttribute('tabindex') === '0') {
+                this.lastNodeOnFocus = item;
+                this.lastNodeOnFocus.setAttribute('tabindex', '-1');
+            }
+        });
+    }
 }
 DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -1461,12 +1495,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Inject, Injector, Input, isDevMode, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, Inject, Injector, Input, isDevMode, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -295,12 +295,6 @@ export class MultiSelectTreeComponent {
         const ngControl = this.injector.get(NgControl, null);
         return ngControl?.control || null;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
     /**
      * @hidden
      */
@@ -313,7 +307,7 @@ export class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (isLetter(event.key)) {
+        if (!this.isFilterActive && isLetter(event.key)) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -666,6 +660,10 @@ export class MultiSelectTreeComponent {
         }));
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+    }
     /**
      * @hidden
      */
@@ -1092,6 +1090,14 @@ export class MultiSelectTreeComponent {
             }
         }
     }
+    handleClick(e) {
+        // The check is needed otherwise when appended to the component, the popup reopens on click
+        // https://github.com/telerik/kendo-angular/issues/3738
+        if ((this.popupRef && this.popupRef.popupElement.contains(e.target))) {
+            return;
+        }
+        this.togglePopup(!this.isOpen);
+    }
     subscribeEvents() {
         [
             this.navigationService.open.subscribe((event) => {
@@ -1359,7 +1365,7 @@ export class MultiSelectTreeComponent {
     }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -1845,12 +1851,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]

package/esm2020/multiselect/multiselect.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
-import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, HostListener } from '@angular/core';
+import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
@@ -572,31 +572,6 @@ export class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
-    /**
-     * @hidden
-     */
-    handleKeyboardEvent(event) {
-        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
-            event.preventDefault();
-            this.handleSelectAll();
-        }
-    }
-    /**
-     * @hidden
-     */
-    hostMousedown(event) {
-        const inputElement = this.searchbar.input.nativeElement;
-        if (event.button === 0) {
-            if (this.isFocused && this.isOpen && event.target === inputElement) {
-                return;
-            }
-            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
-                this.searchbar.focus();
-            }
-            this.togglePopup(!this.isOpen);
-            event.preventDefault();
-        }
-    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -895,6 +870,8 @@ export class MultiSelectComponent {
     }
     ngAfterViewInit() {
         this.searchbar.setInputSize();
+        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
     }
     ngOnDestroy() {
         this._toggle(false);
@@ -1159,6 +1136,30 @@ export class MultiSelectComponent {
             this.clearFilter();
         }
     }
+    handleMousedown(event) {
+        const inputElement = this.searchbar.input.nativeElement;
+        if (event.button === 0) {
+            if (this.isFocused && this.isOpen && event.target === inputElement) {
+                return;
+            }
+            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
+                this.searchbar.focus();
+            }
+            // The check is needed otherwise when appended to the component, the popup reopens on click
+            // https://github.com/telerik/kendo-angular/issues/3738
+            if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
+                return;
+            }
+            event.preventDefault();
+            this.togglePopup(!this.isOpen);
+        }
+    }
+    handleKeydown(event) {
+        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
+            event.preventDefault();
+            this.handleSelectAll();
+        }
+    }
     handleEnter(event) {
         const service = this.selectionService;
         const focusedIndex = this.selectionService.focused;
@@ -1473,7 +1474,7 @@ export class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1932,10 +1933,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
-            }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], hostMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
             }] } });

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: 1673607505,
+    publishDate: 1673621065,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -32,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673607505,
+    publishDate: 1673621065,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -8093,31 +8093,6 @@ class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
-    /**
-     * @hidden
-     */
-    handleKeyboardEvent(event) {
-        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
-            event.preventDefault();
-            this.handleSelectAll();
-        }
-    }
-    /**
-     * @hidden
-     */
-    hostMousedown(event) {
-        const inputElement = this.searchbar.input.nativeElement;
-        if (event.button === 0) {
-            if (this.isFocused && this.isOpen && event.target === inputElement) {
-                return;
-            }
-            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
-                this.searchbar.focus();
-            }
-            this.togglePopup(!this.isOpen);
-            event.preventDefault();
-        }
-    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -8416,6 +8391,8 @@ class MultiSelectComponent {
     }
     ngAfterViewInit() {
         this.searchbar.setInputSize();
+        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
     }
     ngOnDestroy() {
         this._toggle(false);
@@ -8680,6 +8657,30 @@ class MultiSelectComponent {
             this.clearFilter();
         }
     }
+    handleMousedown(event) {
+        const inputElement = this.searchbar.input.nativeElement;
+        if (event.button === 0) {
+            if (this.isFocused && this.isOpen && event.target === inputElement) {
+                return;
+            }
+            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
+                this.searchbar.focus();
+            }
+            // The check is needed otherwise when appended to the component, the popup reopens on click
+            // https://github.com/telerik/kendo-angular/issues/3738
+            if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
+                return;
+            }
+            event.preventDefault();
+            this.togglePopup(!this.isOpen);
+        }
+    }
+    handleKeydown(event) {
+        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
+            event.preventDefault();
+            this.handleSelectAll();
+        }
+    }
     handleEnter(event) {
         const service = this.selectionService;
         const focusedIndex = this.selectionService.focused;
@@ -8994,7 +8995,7 @@ class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -9455,12 +9456,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
-            }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], hostMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
             }] } });
 
 /**
@@ -10507,27 +10502,6 @@ class DropDownTreeComponent {
     get isReadonly() {
         return this.readonly ? '' : null;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        if (isLetter(event.key)) {
-            this.printableCharacters.next(event.key);
-        }
-        const eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    }
     set treeview(treeview) {
         if (treeview) {
             if (this.isFocused && !this.filterable || this.touchEnabled) {
@@ -10698,6 +10672,9 @@ class DropDownTreeComponent {
             return 'visible';
         }
     }
+    get isFilterActive() {
+        return this.filterInput && document.activeElement === this.filterInput.nativeElement;
+    }
     /**
      * @hidden
      *
@@ -10813,6 +10790,10 @@ class DropDownTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    ngAfterViewInit() {
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+    }
     /**
      * @hidden
      *
@@ -10868,17 +10849,29 @@ class DropDownTreeComponent {
             return;
         }
         this.isFocused = false;
+        this.togglePopup(false);
         if (hasObservers(this.onBlur) ||
             isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
-                this.togglePopup(false);
                 this.onBlur.emit();
                 this.onTouchedCallback();
             });
         }
-        else {
-            this.togglePopup(false);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (!this.isFilterActive && isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
         }
+        const eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
     }
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
@@ -11171,6 +11164,14 @@ class DropDownTreeComponent {
             }
         }
     }
+    handleClick(e) {
+        // The check is needed otherwise when appended to the component, the popup reopens on click
+        // https://github.com/telerik/kendo-angular/issues/3738        
+        if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
+            || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
+            this.togglePopup(!this.isOpen);
+        }
+    }
     handleEscape() {
         this.togglePopup(false);
         this.focus();
@@ -11204,10 +11205,25 @@ class DropDownTreeComponent {
             }),
             this.navigationService.enter
                 .pipe(tap((event) => event.originalEvent.preventDefault()))
-                .subscribe(() => this.togglePopup(true)),
+                .subscribe((e) => {
+                // The check is needed otherwise when appended to the component, the popup reopens on click
+                // https://github.com/telerik/kendo-angular/issues/3738     
+                if (e.originalEvent.target === this.wrapper.nativeElement) {
+                    this.togglePopup(true);
+                }
+                if (!this.isOpen) {
+                    this.focus();
+                }
+            }),
             this.navigationService.esc
                 .subscribe(() => this.handleEscape()),
-            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.tab.subscribe(() => {
+                this.focus();
+                if (this.isOpen) {
+                    this.treeview.blur();
+                    this.removeTreeViewFromTabOrder();
+                }
+            }),
             this.navigationService.down.subscribe((event) => {
                 if (!this.treeview) {
                     return;
@@ -11295,9 +11311,22 @@ class DropDownTreeComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
+    /**
+     * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
+     * and the user will not be able to tab to the rest of the browser elements
+     */
+    removeTreeViewFromTabOrder() {
+        const nodes = this.treeview.element.nativeElement.querySelectorAll('li');
+        nodes.forEach(item => {
+            if (item.getAttribute('tabindex') === '0') {
+                this.lastNodeOnFocus = item;
+                this.lastNodeOnFocus.setAttribute('tabindex', '-1');
+            }
+        });
+    }
 }
 DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -11714,12 +11743,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]
@@ -12504,12 +12527,6 @@ class MultiSelectTreeComponent {
         const ngControl = this.injector.get(NgControl, null);
         return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
     /**
      * @hidden
      */
@@ -12523,7 +12540,7 @@ class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (isLetter(event.key)) {
+        if (!this.isFilterActive && isLetter(event.key)) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -12876,6 +12893,10 @@ class MultiSelectTreeComponent {
         }));
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+    }
     /**
      * @hidden
      */
@@ -13298,6 +13319,14 @@ class MultiSelectTreeComponent {
             }
         }
     }
+    handleClick(e) {
+        // The check is needed otherwise when appended to the component, the popup reopens on click
+        // https://github.com/telerik/kendo-angular/issues/3738
+        if ((this.popupRef && this.popupRef.popupElement.contains(e.target))) {
+            return;
+        }
+        this.togglePopup(!this.isOpen);
+    }
     subscribeEvents() {
         [
             this.navigationService.open.subscribe((event) => {
@@ -13565,7 +13594,7 @@ class MultiSelectTreeComponent {
     }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -14053,12 +14082,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]

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

@@ -32,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673607505,
+    publishDate: 1673621065,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -8086,31 +8086,6 @@ class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
-    /**
-     * @hidden
-     */
-    handleKeyboardEvent(event) {
-        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
-            event.preventDefault();
-            this.handleSelectAll();
-        }
-    }
-    /**
-     * @hidden
-     */
-    hostMousedown(event) {
-        const inputElement = this.searchbar.input.nativeElement;
-        if (event.button === 0) {
-            if (this.isFocused && this.isOpen && event.target === inputElement) {
-                return;
-            }
-            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
-                this.searchbar.focus();
-            }
-            this.togglePopup(!this.isOpen);
-            event.preventDefault();
-        }
-    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -8409,6 +8384,8 @@ class MultiSelectComponent {
     }
     ngAfterViewInit() {
         this.searchbar.setInputSize();
+        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
     }
     ngOnDestroy() {
         this._toggle(false);
@@ -8673,6 +8650,30 @@ class MultiSelectComponent {
             this.clearFilter();
         }
     }
+    handleMousedown(event) {
+        const inputElement = this.searchbar.input.nativeElement;
+        if (event.button === 0) {
+            if (this.isFocused && this.isOpen && event.target === inputElement) {
+                return;
+            }
+            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
+                this.searchbar.focus();
+            }
+            // The check is needed otherwise when appended to the component, the popup reopens on click
+            // https://github.com/telerik/kendo-angular/issues/3738
+            if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
+                return;
+            }
+            event.preventDefault();
+            this.togglePopup(!this.isOpen);
+        }
+    }
+    handleKeydown(event) {
+        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
+            event.preventDefault();
+            this.handleSelectAll();
+        }
+    }
     handleEnter(event) {
         const service = this.selectionService;
         const focusedIndex = this.selectionService.focused;
@@ -8987,7 +8988,7 @@ class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -9446,12 +9447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
-            }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], hostMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
             }] } });
 
 /**
@@ -10496,27 +10491,6 @@ class DropDownTreeComponent {
     get isReadonly() {
         return this.readonly ? '' : null;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        if (isLetter(event.key)) {
-            this.printableCharacters.next(event.key);
-        }
-        const eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    }
     set treeview(treeview) {
         if (treeview) {
             if (this.isFocused && !this.filterable || this.touchEnabled) {
@@ -10687,6 +10661,9 @@ class DropDownTreeComponent {
             return 'visible';
         }
     }
+    get isFilterActive() {
+        return this.filterInput && document.activeElement === this.filterInput.nativeElement;
+    }
     /**
      * @hidden
      *
@@ -10802,6 +10779,10 @@ class DropDownTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    ngAfterViewInit() {
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+    }
     /**
      * @hidden
      *
@@ -10857,17 +10838,29 @@ class DropDownTreeComponent {
             return;
         }
         this.isFocused = false;
+        this.togglePopup(false);
         if (hasObservers(this.onBlur) ||
             isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
-                this.togglePopup(false);
                 this.onBlur.emit();
                 this.onTouchedCallback();
             });
         }
-        else {
-            this.togglePopup(false);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (!this.isFilterActive && isLetter(event.key)) {
+            this.printableCharacters.next(event.key);
         }
+        const eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
     }
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
@@ -11160,6 +11153,14 @@ class DropDownTreeComponent {
             }
         }
     }
+    handleClick(e) {
+        // The check is needed otherwise when appended to the component, the popup reopens on click
+        // https://github.com/telerik/kendo-angular/issues/3738        
+        if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
+            || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
+            this.togglePopup(!this.isOpen);
+        }
+    }
     handleEscape() {
         this.togglePopup(false);
         this.focus();
@@ -11193,10 +11194,25 @@ class DropDownTreeComponent {
             }),
             this.navigationService.enter
                 .pipe(tap((event) => event.originalEvent.preventDefault()))
-                .subscribe(() => this.togglePopup(true)),
+                .subscribe((e) => {
+                // The check is needed otherwise when appended to the component, the popup reopens on click
+                // https://github.com/telerik/kendo-angular/issues/3738     
+                if (e.originalEvent.target === this.wrapper.nativeElement) {
+                    this.togglePopup(true);
+                }
+                if (!this.isOpen) {
+                    this.focus();
+                }
+            }),
             this.navigationService.esc
                 .subscribe(() => this.handleEscape()),
-            this.navigationService.tab.subscribe(() => this.focus()),
+            this.navigationService.tab.subscribe(() => {
+                this.focus();
+                if (this.isOpen) {
+                    this.treeview.blur();
+                    this.removeTreeViewFromTabOrder();
+                }
+            }),
             this.navigationService.down.subscribe((event) => {
                 if (!this.treeview) {
                     return;
@@ -11284,9 +11300,22 @@ class DropDownTreeComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
+    /**
+     * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
+     * and the user will not be able to tab to the rest of the browser elements
+     */
+    removeTreeViewFromTabOrder() {
+        const nodes = this.treeview.element.nativeElement.querySelectorAll('li');
+        nodes.forEach(item => {
+            if (item.getAttribute('tabindex') === '0') {
+                this.lastNodeOnFocus = item;
+                this.lastNodeOnFocus.setAttribute('tabindex', '-1');
+            }
+        });
+    }
 }
 DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -11701,12 +11730,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]
@@ -12491,12 +12514,6 @@ class MultiSelectTreeComponent {
         const ngControl = this.injector.get(NgControl, null);
         return ngControl?.control || null;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
     /**
      * @hidden
      */
@@ -12509,7 +12526,7 @@ class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (isLetter(event.key)) {
+        if (!this.isFilterActive && isLetter(event.key)) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -12862,6 +12879,10 @@ class MultiSelectTreeComponent {
         }));
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+    }
     /**
      * @hidden
      */
@@ -13288,6 +13309,14 @@ class MultiSelectTreeComponent {
             }
         }
     }
+    handleClick(e) {
+        // The check is needed otherwise when appended to the component, the popup reopens on click
+        // https://github.com/telerik/kendo-angular/issues/3738
+        if ((this.popupRef && this.popupRef.popupElement.contains(e.target))) {
+            return;
+        }
+        this.togglePopup(!this.isOpen);
+    }
     subscribeEvents() {
         [
             this.navigationService.open.subscribe((event) => {
@@ -13555,7 +13584,7 @@ class MultiSelectTreeComponent {
     }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -14041,12 +14070,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]

package/multiselect/multiselect.component.d.ts

@@ -389,14 +389,6 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     get dir(): string;
     get disabledClass(): boolean;
     get isLoading(): boolean;
-    /**
-     * @hidden
-     */
-    handleKeyboardEvent(event: KeyboardEvent): void;
-    /**
-     * @hidden
-     */
-    hostMousedown(event: any): void;
     disabledIndices: Set<number>;
     private initialized;
     private _size;
@@ -538,6 +530,8 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     private disabledItemsMapper;
     private createCustomValueStream;
     private handleItemChange;
+    private handleMousedown;
+    private handleKeydown;
     private handleEnter;
     private handleClose;
     private handleEnd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "11.0.0-develop.111",
+  "version": "11.0.0-develop.113",
   "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.111",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.111",
-    "@progress/kendo-angular-popup": "11.0.0-develop.111",
-    "@progress/kendo-angular-icons": "11.0.0-develop.111",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.111",
-    "@progress/kendo-angular-treeview": "11.0.0-develop.111",
+    "@progress/kendo-angular-common": "11.0.0-develop.113",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.113",
+    "@progress/kendo-angular-popup": "11.0.0-develop.113",
+    "@progress/kendo-angular-icons": "11.0.0-develop.113",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.113",
+    "@progress/kendo-angular-treeview": "11.0.0-develop.113",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-label": "11.0.0-develop.111"
+    "@progress/kendo-angular-label": "11.0.0-develop.113"
   },
   "dependencies": {
     "tslib": "^2.3.1"