@progress/kendo-vue-dropdowns 3.9.4-dev.202304190945 → 3.9.4-dev.202304210655

package/dist/es/ComboBox/ComboBox.js

@@ -269,10 +269,12 @@ var ComboBoxVue2 = {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
       } else if (opening && !virtual) {
-        this.base.scrollToItem(selectedItemIndex);
+        this.base.scrollToItem(selectedItem ? selectedItemIndex : this.getFocusedIndex());
         this.prevCurrentOpened = true;
       } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
         this.base.scrollToItem(selectedItemIndex);
+      } else if (opened && !selectedItem) {
+        this.base.scrollToItem(this.getFocusedIndex());
       }
     }
     if (opening && this.input) {

package/dist/es/DropDownTree/DropDownTreeProps.d.ts

@@ -135,7 +135,7 @@ export interface DropDownTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -172,7 +172,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select`.
      *
      * @example
      * ```jsx-no-run

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -357,7 +357,7 @@ var MultiSelectTreeVue2 = {
         return matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
       size: size
-    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+    }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -373,7 +373,7 @@ var MultiSelectTreeVue2 = {
       "aria-label": this.$props.ariaLabelledBy
     }, [h("span", {
       "class": "k-input-value-text"
-    }, ["\xA0"])]), this.$props.loading && h(Icon, {
+    }, [placeholder])])]), this.$props.loading && h(Icon, {
       "class": "k-input-loading-icon",
       name: "loading",
       attrs: this.v3 ? undefined : {
@@ -453,12 +453,16 @@ var MultiSelectTreeVue2 = {
         onChange: _this2.onFilterChange,
         on: _this2.v3 ? undefined : {
           "change": _this2.onFilterChange,
-          "keydown": _this2.onInputKeyDown
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
         },
         onKeydown: _this2.onInputKeyDown,
         size: size,
         rounded: rounded,
-        fillMode: fillMode
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
       }), header && h("div", {
         "class": "k-list-header"
       }, [header]), dataItems.length > 0 ?
@@ -493,11 +497,13 @@ var MultiSelectTreeVue2 = {
           "itemclick": _this2.onChange,
           "checkchange": _this2.onChange,
           "expandchange": _this2.onExpand,
+          "focus": _this2.onFocus,
           "blur": _this2.onBlur,
           "keydown": _this2.onWrapperKeyDown
         },
         onCheckchange: _this2.onChange,
         onExpandchange: _this2.onExpand,
+        onFocus: _this2.onFocus,
         onBlur: _this2.onBlur,
         onKeydown: _this2.onWrapperKeyDown,
         checkboxes: true,
@@ -518,12 +524,16 @@ var MultiSelectTreeVue2 = {
       onChange: _this2.onFilterChange,
       on: _this2.v3 ? undefined : {
         "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
       onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
-      fillMode: fillMode
+      fillMode: fillMode,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
     }, [header]), dataItems.length > 0 ? h(TreeView, {
@@ -556,11 +566,13 @@ var MultiSelectTreeVue2 = {
         "itemclick": _this2.onChange,
         "checkchange": _this2.onChange,
         "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
         "blur": _this2.onBlur,
         "keydown": _this2.onWrapperKeyDown
       },
       onCheckchange: _this2.onChange,
       onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
       onBlur: _this2.onBlur,
       onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
@@ -701,6 +713,7 @@ var MultiSelectTreeVue2 = {
     },
     onBlur: function onBlur(event) {
       if (this.focusedState && !this.skipFocusRef) {
+        this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
           event: event,
@@ -744,7 +757,7 @@ var MultiSelectTreeVue2 = {
         event: event,
         target: this
       };
-      if (this.value && this.value.length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete)) {
+      if (this.value && this.value.length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete || keyCode === Keys.backspace)) {
         var tagsToRender = this.tagsToRenderRef;
         var focusedIndex = this.focusedTagState ? tagsToRender.findIndex(function (t) {
           return matchTags(t, _this.focusedTagState, _this.dataItemKey);
@@ -769,7 +782,7 @@ var MultiSelectTreeVue2 = {
           newFocusedTag = tagsToRender[0];
         } else if (keyCode === Keys.end) {
           newFocusedTag = tagsToRender[tagsToRender.length - 1];
-        } else if (keyCode === Keys.delete) {
+        } else if (keyCode === Keys.delete || keyCode === Keys.backspace) {
           if (hasFocused) {
             this.changeValue(ev, tagsToRender[focusedIndex].data, 'delete');
           }
@@ -781,6 +794,9 @@ var MultiSelectTreeVue2 = {
       if (this.isOpen) {
         if (keyCode === Keys.esc || altKey && keyCode === Keys.up) {
           event.preventDefault();
+          this.switchFocus(function () {
+            _this.focusElement(_this.elementRef);
+          });
           this.closePopup(ev);
         } else if (treeviewElement && treeviewElement.querySelector('.k-focus') && (keyCode === Keys.up || keyCode === Keys.down || keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end)) {
           if (keyCode === Keys.up) {
@@ -816,7 +832,7 @@ var MultiSelectTreeVue2 = {
       }
       event.preventDefault();
       this.switchFocus(keyCode === Keys.up ? function () {
-        _this.focusElement(_this.$el);
+        _this.focusElement(_this.elementRef);
       } : function () {
         _this.focusElement(_this.treeViewRef && _this.treeViewRef.$el);
       });

package/dist/es/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -161,7 +161,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -202,7 +202,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
      *
      * @example
      * ```jsx-no-run

package/dist/es/common/ListFilter.js

@@ -16,7 +16,9 @@ var ListFilterVue2 = {
   // @ts-ignore
   emits: {
     keydown: null,
-    change: null
+    change: null,
+    focus: null,
+    blur: null
   },
   props: {
     value: String,
@@ -69,6 +71,12 @@ var ListFilterVue2 = {
     },
     onChange: function onChange(e) {
       this.$emit('change', e);
+    },
+    handleFocus: function handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$emit('blur', e);
     }
   },
   mounted: function mounted() {
@@ -103,9 +111,13 @@ var ListFilterVue2 = {
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
-        "keydown": this.onKeyDown
+        "keydown": this.onKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
       },
-      onKeydown: this.onKeyDown
+      onKeydown: this.onKeyDown,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
     })])]);
   }
 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1681896936,
+    publishDate: 1682059133,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/ComboBox/ComboBox.js

@@ -269,10 +269,12 @@ var ComboBoxVue2 = {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
       } else if (opening && !virtual) {
-        this.base.scrollToItem(selectedItemIndex);
+        this.base.scrollToItem(selectedItem ? selectedItemIndex : this.getFocusedIndex());
         this.prevCurrentOpened = true;
       } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
         this.base.scrollToItem(selectedItemIndex);
+      } else if (opened && !selectedItem) {
+        this.base.scrollToItem(this.getFocusedIndex());
       }
     }
     if (opening && this.input) {

package/dist/esm/DropDownTree/DropDownTreeProps.d.ts

@@ -135,7 +135,7 @@ export interface DropDownTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -172,7 +172,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select`.
      *
      * @example
      * ```jsx-no-run

package/dist/esm/MultiSelectTree/MultiSelectTree.js

@@ -357,7 +357,7 @@ var MultiSelectTreeVue2 = {
         return matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
       size: size
-    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+    }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -373,7 +373,7 @@ var MultiSelectTreeVue2 = {
       "aria-label": this.$props.ariaLabelledBy
     }, [h("span", {
       "class": "k-input-value-text"
-    }, ["\xA0"])]), this.$props.loading && h(Icon, {
+    }, [placeholder])])]), this.$props.loading && h(Icon, {
       "class": "k-input-loading-icon",
       name: "loading",
       attrs: this.v3 ? undefined : {
@@ -453,12 +453,16 @@ var MultiSelectTreeVue2 = {
         onChange: _this2.onFilterChange,
         on: _this2.v3 ? undefined : {
           "change": _this2.onFilterChange,
-          "keydown": _this2.onInputKeyDown
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
         },
         onKeydown: _this2.onInputKeyDown,
         size: size,
         rounded: rounded,
-        fillMode: fillMode
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
       }), header && h("div", {
         "class": "k-list-header"
       }, [header]), dataItems.length > 0 ?
@@ -493,11 +497,13 @@ var MultiSelectTreeVue2 = {
           "itemclick": _this2.onChange,
           "checkchange": _this2.onChange,
           "expandchange": _this2.onExpand,
+          "focus": _this2.onFocus,
           "blur": _this2.onBlur,
           "keydown": _this2.onWrapperKeyDown
         },
         onCheckchange: _this2.onChange,
         onExpandchange: _this2.onExpand,
+        onFocus: _this2.onFocus,
         onBlur: _this2.onBlur,
         onKeydown: _this2.onWrapperKeyDown,
         checkboxes: true,
@@ -518,12 +524,16 @@ var MultiSelectTreeVue2 = {
       onChange: _this2.onFilterChange,
       on: _this2.v3 ? undefined : {
         "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
       onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
-      fillMode: fillMode
+      fillMode: fillMode,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
     }, [header]), dataItems.length > 0 ? h(TreeView, {
@@ -556,11 +566,13 @@ var MultiSelectTreeVue2 = {
         "itemclick": _this2.onChange,
         "checkchange": _this2.onChange,
         "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
         "blur": _this2.onBlur,
         "keydown": _this2.onWrapperKeyDown
       },
       onCheckchange: _this2.onChange,
       onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
       onBlur: _this2.onBlur,
       onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
@@ -701,6 +713,7 @@ var MultiSelectTreeVue2 = {
     },
     onBlur: function onBlur(event) {
       if (this.focusedState && !this.skipFocusRef) {
+        this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
           event: event,
@@ -744,7 +757,7 @@ var MultiSelectTreeVue2 = {
         event: event,
         target: this
       };
-      if (this.value && this.value.length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete)) {
+      if (this.value && this.value.length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete || keyCode === Keys.backspace)) {
         var tagsToRender = this.tagsToRenderRef;
         var focusedIndex = this.focusedTagState ? tagsToRender.findIndex(function (t) {
           return matchTags(t, _this.focusedTagState, _this.dataItemKey);
@@ -769,7 +782,7 @@ var MultiSelectTreeVue2 = {
           newFocusedTag = tagsToRender[0];
         } else if (keyCode === Keys.end) {
           newFocusedTag = tagsToRender[tagsToRender.length - 1];
-        } else if (keyCode === Keys.delete) {
+        } else if (keyCode === Keys.delete || keyCode === Keys.backspace) {
           if (hasFocused) {
             this.changeValue(ev, tagsToRender[focusedIndex].data, 'delete');
           }
@@ -781,6 +794,9 @@ var MultiSelectTreeVue2 = {
       if (this.isOpen) {
         if (keyCode === Keys.esc || altKey && keyCode === Keys.up) {
           event.preventDefault();
+          this.switchFocus(function () {
+            _this.focusElement(_this.elementRef);
+          });
           this.closePopup(ev);
         } else if (treeviewElement && treeviewElement.querySelector('.k-focus') && (keyCode === Keys.up || keyCode === Keys.down || keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end)) {
           if (keyCode === Keys.up) {
@@ -816,7 +832,7 @@ var MultiSelectTreeVue2 = {
       }
       event.preventDefault();
       this.switchFocus(keyCode === Keys.up ? function () {
-        _this.focusElement(_this.$el);
+        _this.focusElement(_this.elementRef);
       } : function () {
         _this.focusElement(_this.treeViewRef && _this.treeViewRef.$el);
       });

package/dist/esm/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -161,7 +161,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -202,7 +202,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
      *
      * @example
      * ```jsx-no-run

package/dist/esm/common/ListFilter.js

@@ -16,7 +16,9 @@ var ListFilterVue2 = {
   // @ts-ignore
   emits: {
     keydown: null,
-    change: null
+    change: null,
+    focus: null,
+    blur: null
   },
   props: {
     value: String,
@@ -69,6 +71,12 @@ var ListFilterVue2 = {
     },
     onChange: function onChange(e) {
       this.$emit('change', e);
+    },
+    handleFocus: function handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$emit('blur', e);
     }
   },
   mounted: function mounted() {
@@ -103,9 +111,13 @@ var ListFilterVue2 = {
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
-        "keydown": this.onKeyDown
+        "keydown": this.onKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
       },
-      onKeydown: this.onKeyDown
+      onKeydown: this.onKeyDown,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
     })])]);
   }
 };

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1681896936,
+    publishDate: 1682059133,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/ComboBox/ComboBox.js

@@ -275,10 +275,12 @@ var ComboBoxVue2 = {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
       } else if (opening && !virtual) {
-        this.base.scrollToItem(selectedItemIndex);
+        this.base.scrollToItem(selectedItem ? selectedItemIndex : this.getFocusedIndex());
         this.prevCurrentOpened = true;
       } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
         this.base.scrollToItem(selectedItemIndex);
+      } else if (opened && !selectedItem) {
+        this.base.scrollToItem(this.getFocusedIndex());
       }
     }
     if (opening && this.input) {

package/dist/npm/DropDownTree/DropDownTreeProps.d.ts

@@ -135,7 +135,7 @@ export interface DropDownTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -172,7 +172,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select`.
      *
      * @example
      * ```jsx-no-run

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -363,7 +363,7 @@ var MultiSelectTreeVue2 = {
         return (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
       size: size
-    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+    }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -379,7 +379,7 @@ var MultiSelectTreeVue2 = {
       "aria-label": this.$props.ariaLabelledBy
     }, [h("span", {
       "class": "k-input-value-text"
-    }, ["\xA0"])]), this.$props.loading && h(kendo_vue_common_1.Icon, {
+    }, [placeholder])])]), this.$props.loading && h(kendo_vue_common_1.Icon, {
       "class": "k-input-loading-icon",
       name: "loading",
       attrs: this.v3 ? undefined : {
@@ -459,12 +459,16 @@ var MultiSelectTreeVue2 = {
         onChange: _this2.onFilterChange,
         on: _this2.v3 ? undefined : {
           "change": _this2.onFilterChange,
-          "keydown": _this2.onInputKeyDown
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
         },
         onKeydown: _this2.onInputKeyDown,
         size: size,
         rounded: rounded,
-        fillMode: fillMode
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
       }), header && h("div", {
         "class": "k-list-header"
       }, [header]), dataItems.length > 0 ?
@@ -499,11 +503,13 @@ var MultiSelectTreeVue2 = {
           "itemclick": _this2.onChange,
           "checkchange": _this2.onChange,
           "expandchange": _this2.onExpand,
+          "focus": _this2.onFocus,
           "blur": _this2.onBlur,
           "keydown": _this2.onWrapperKeyDown
         },
         onCheckchange: _this2.onChange,
         onExpandchange: _this2.onExpand,
+        onFocus: _this2.onFocus,
         onBlur: _this2.onBlur,
         onKeydown: _this2.onWrapperKeyDown,
         checkboxes: true,
@@ -524,12 +530,16 @@ var MultiSelectTreeVue2 = {
       onChange: _this2.onFilterChange,
       on: _this2.v3 ? undefined : {
         "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
       onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
-      fillMode: fillMode
+      fillMode: fillMode,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
     }, [header]), dataItems.length > 0 ? h(kendo_vue_treeview_1.TreeView, {
@@ -562,11 +572,13 @@ var MultiSelectTreeVue2 = {
         "itemclick": _this2.onChange,
         "checkchange": _this2.onChange,
         "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
         "blur": _this2.onBlur,
         "keydown": _this2.onWrapperKeyDown
       },
       onCheckchange: _this2.onChange,
       onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
       onBlur: _this2.onBlur,
       onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
@@ -707,6 +719,7 @@ var MultiSelectTreeVue2 = {
     },
     onBlur: function onBlur(event) {
       if (this.focusedState && !this.skipFocusRef) {
+        this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
           event: event,
@@ -750,7 +763,7 @@ var MultiSelectTreeVue2 = {
         event: event,
         target: this
       };
-      if (this.value && this.value.length > 0 && (keyCode === kendo_vue_common_1.Keys.left || keyCode === kendo_vue_common_1.Keys.right || keyCode === kendo_vue_common_1.Keys.home || keyCode === kendo_vue_common_1.Keys.end || keyCode === kendo_vue_common_1.Keys.delete)) {
+      if (this.value && this.value.length > 0 && (keyCode === kendo_vue_common_1.Keys.left || keyCode === kendo_vue_common_1.Keys.right || keyCode === kendo_vue_common_1.Keys.home || keyCode === kendo_vue_common_1.Keys.end || keyCode === kendo_vue_common_1.Keys.delete || keyCode === kendo_vue_common_1.Keys.backspace)) {
         var tagsToRender = this.tagsToRenderRef;
         var focusedIndex = this.focusedTagState ? tagsToRender.findIndex(function (t) {
           return (0, utils_1.matchTags)(t, _this.focusedTagState, _this.dataItemKey);
@@ -775,7 +788,7 @@ var MultiSelectTreeVue2 = {
           newFocusedTag = tagsToRender[0];
         } else if (keyCode === kendo_vue_common_1.Keys.end) {
           newFocusedTag = tagsToRender[tagsToRender.length - 1];
-        } else if (keyCode === kendo_vue_common_1.Keys.delete) {
+        } else if (keyCode === kendo_vue_common_1.Keys.delete || keyCode === kendo_vue_common_1.Keys.backspace) {
           if (hasFocused) {
             this.changeValue(ev, tagsToRender[focusedIndex].data, 'delete');
           }
@@ -787,6 +800,9 @@ var MultiSelectTreeVue2 = {
       if (this.isOpen) {
         if (keyCode === kendo_vue_common_1.Keys.esc || altKey && keyCode === kendo_vue_common_1.Keys.up) {
           event.preventDefault();
+          this.switchFocus(function () {
+            _this.focusElement(_this.elementRef);
+          });
           this.closePopup(ev);
         } else if (treeviewElement && treeviewElement.querySelector('.k-focus') && (keyCode === kendo_vue_common_1.Keys.up || keyCode === kendo_vue_common_1.Keys.down || keyCode === kendo_vue_common_1.Keys.left || keyCode === kendo_vue_common_1.Keys.right || keyCode === kendo_vue_common_1.Keys.home || keyCode === kendo_vue_common_1.Keys.end)) {
           if (keyCode === kendo_vue_common_1.Keys.up) {
@@ -822,7 +838,7 @@ var MultiSelectTreeVue2 = {
       }
       event.preventDefault();
       this.switchFocus(keyCode === kendo_vue_common_1.Keys.up ? function () {
-        _this.focusElement(_this.$el);
+        _this.focusElement(_this.elementRef);
       } : function () {
         _this.focusElement(_this.treeViewRef && _this.treeViewRef.$el);
       });

package/dist/npm/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -161,7 +161,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -202,7 +202,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
      *
      * @example
      * ```jsx-no-run