@progress/kendo-angular-dropdowns 11.0.0-develop.99 → 11.0.1-develop.1

package/NOTICE.txt

@@ -1,6 +1,6 @@
 Progress Kendo UI for Angular 2023
 
-Copyright (c) 2016-2022 Progress Software Corporation and/or one of its
+Copyright © 2016-2023 Progress Software Corporation and/or one of its
 subsidiaries or affiliates. All rights reserved.
 
 Portions of the Product include certain open source and commercial third-party
@@ -65,7 +65,7 @@ the Product:
 
 (1) 	The Apache Software License, Version 2.0:
 
-Progress Kendo UI for Angular 2022 incorporates TsLib v1.9.3. Such technology
+Progress Kendo UI for Angular 2023 incorporates TsLib v1.9.3. Such technology
 is subject to the following terms and conditions: Apache Software License Version 2.0.
 
                                  Apache License
@@ -290,7 +290,7 @@ is subject to the following terms and conditions: Apache Software License Versio
 
 (2) 	BSD-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates xlf-translate v2.0.4.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates xlf-translate v2.0.4.  Such
 technology is subject to the following terms and conditions:
 
    BSD 3-Clause License
@@ -325,7 +325,7 @@ technology is subject to the following terms and conditions:
 
 (3) 	The ISC License:
 
-(a) Progress Kendo UI for Angular 2022 incorporates glob v7.1.3.  Such technology
+(a) Progress Kendo UI for Angular 2023 incorporates glob v7.1.3.  Such technology
 is subject to the following terms and conditions:
 
     The ISC License
@@ -352,7 +352,7 @@ is subject to the following terms and conditions:
 
 (4)	MIT-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates HammerJS v2.0.8.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates HammerJS v2.0.8.  Such
 technology is subject to the following terms and conditions:
 
    The MIT License (MIT)
@@ -377,7 +377,7 @@ technology is subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(b) Progress Kendo UI for Angular 2022 incorporates prosemirror-commands v1*,
+(b) Progress Kendo UI for Angular 2023 incorporates prosemirror-commands v1*,
 prosemirror-cursor v1*, prosemirror-gapcursor v1*, prosemirror-history v1*,
 prosemirror-inputrules v1*, prosemirror-keymap v1*, prosemirror-model v1*,
 prosemirror-schema-list v1*, prosemirror-state v1*, prosemirror-tables v0.7*,
@@ -404,7 +404,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
 
-(c) Progress Kendo UI for Angular 2022 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
+(c) Progress Kendo UI for Angular 2023 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
 
    MIT License
 
@@ -428,7 +428,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(d) Progress Kendo UI for Angular 2022 incorporates @types/prosemirror-commands v1*,
+(d) Progress Kendo UI for Angular 2023 incorporates @types/prosemirror-commands v1*,
 @types/prosemirror-dropcursor v1*, @types/prosemirror-gapcursor v1*, @types/prosemirror-history v1*,
 @types/prosemirror-inputrules v1*, @types/prosemirror-keymap v1*, @types/prosemirror-model v1*,
 @types/prosemirror-schema-list v1*, @types/prosemirror-state v1*, @types/prosemirror-tables v0.9*,
@@ -457,7 +457,7 @@ subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-(e) Progress Kendo UI for Angular 2022 incorporates pako-esm v1.0.0.  Such
+(e) Progress Kendo UI for Angular 2023 incorporates pako-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
   Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -483,7 +483,7 @@ technology is subject to the following terms and conditions:
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 
-(f) Progress Kendo UI for Angular 2022 incorporates jszip-esm v1.0.0.  Such
+(f) Progress Kendo UI for Angular 2023 incorporates jszip-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
     Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -510,7 +510,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(g) Progress Kendo UI for Angular 2022 incorporates data.task v3.1.2.  Such
+(g) Progress Kendo UI for Angular 2023 incorporates data.task v3.1.2.  Such
 technology is subject to the following terms and conditions:
 
     The MIT License
@@ -535,7 +535,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(h) Progress Kendo UI for Angular 2022 incorporates ramda v0.23.  Such technology
+(h) Progress Kendo UI for Angular 2023 incorporates ramda v0.23.  Such technology
 is subject to the following terms and conditions:
 
     The MIT License (MIT)
@@ -560,7 +560,7 @@ is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(i) Progress Kendo UI for Angular 2022 incorporates js-yaml v3.14.0.  Such
+(i) Progress Kendo UI for Angular 2023 incorporates js-yaml v3.14.0.  Such
 technology is subject to the following terms and conditions:
 
     (The MIT License)
@@ -587,7 +587,7 @@ technology is subject to the following terms and conditions:
 
 (5)	UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE:
 
-Progress Kendo UI for Angular 2022 incorporates Unicode CLDR Database v33.
+Progress Kendo UI for Angular 2023 incorporates Unicode CLDR Database v33.
 Such technology is subject to the following terms and conditions:
 
    UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
@@ -605,7 +605,7 @@ Such technology is subject to the following terms and conditions:
 
    COPYRIGHT AND PERMISSION NOTICE
 
-   Copyright © 1991-2021 Unicode, Inc. All rights reserved.
+   Copyright © 1991-2019 Unicode, Inc. All rights reserved.
    Distributed under the Terms of Use in https://www.unicode.org/copyright.html.
 
    Permission is hereby granted, free of charge, to any person obtaining
@@ -642,7 +642,7 @@ incorporated into the Product:  NONE
 
 3. Special Notices Regarding Progress Products incorporated into the Product:
 
-(a) Progress Kendo UI for Angular 2022 incorporates Kendo UI Licensing CLI v1.1
+(a) Progress Kendo UI for Angular 2023 incorporates Kendo UI Licensing CLI v1.1
 from Progress Software Corporation. See NOTICE.txt text file within product for
 third-party license information.
 
@@ -651,4 +651,4 @@ the release notes or other documentation that accompanies updates received in
 connection with support of the Product.
 
 
-Updated 1/6/2022
+Updated 13.Jan.2023

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;
@@ -274,7 +266,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      */
     isNodeExpanded: (item: object, index: string) => boolean;
     /**
-     * A callback which determines whether a tree node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
+     * A callback which determines whether a tree node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
      * Useful for custom filtering implementations.
      */
     isNodeVisible: (item: object, index: string) => boolean;
@@ -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
      */
@@ -265,7 +261,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      */
     isNodeExpanded: (item: object, index: string) => boolean;
     /**
-     * A callback which determines whether a tree node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
+     * A callback which determines whether a tree node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
      * Useful for custom filtering implementations.
      */
     isNodeVisible: (item: object, index: string) => boolean;
@@ -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';
@@ -162,7 +162,7 @@ export class DropDownTreeComponent {
          */
         this.itemDisabled = itemDisabled;
         /**
-         * A callback which determines whether a tree node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
+         * A callback which determines whether a tree node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
          * Useful for custom filtering implementations.
          */
         this.isNodeVisible = isNodeVisible;
@@ -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
      *
@@ -527,8 +509,6 @@ export class DropDownTreeComponent {
                 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 = '';
         }));
@@ -562,6 +542,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 +601,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 +916,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 +957,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 +1063,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 +1493,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';
@@ -148,7 +148,7 @@ export class MultiSelectTreeComponent {
          */
         this.fetchChildren = fetchChildren;
         /**
-         * A callback which determines whether a tree node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
+         * A callback which determines whether a tree node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
          * Useful for custom filtering implementations.
          */
         this.isNodeVisible = isNodeVisible;
@@ -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;
@@ -652,8 +646,6 @@ export class MultiSelectTreeComponent {
                 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 = '';
         }));
@@ -666,6 +658,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 +1088,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 +1363,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 +1849,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']]
             }] } });