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

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

@@ -36,6 +36,7 @@ import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { TagList } from '../MultiSelect/TagList';
 import { ClearButton } from '../common/ClearButton';
 import { ListFilter } from '../common/ListFilter';
+import { getMultiSelectTreeValue } from './utils';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -59,6 +60,9 @@ var getValidity = function getValidity(parameters, hasValue) {
  */
 var MultiSelectTreeVue2 = {
   name: 'KendoMultiSelectTree',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     open: null,
@@ -67,7 +71,9 @@ var MultiSelectTreeVue2 = {
     blur: null,
     change: null,
     filterChange: null,
-    expandChange: null
+    expandChange: null,
+    'changemodel': null,
+    'update:modelValue': null
   },
   props: {
     opened: {
@@ -85,6 +91,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     value: Array,
+    modelValue: Array,
     valueMap: Function,
     placeholder: String,
     dataItemKey: {
@@ -117,7 +124,7 @@ var MultiSelectTreeVue2 = {
     },
     valid: {
       type: Boolean,
-      default: true
+      default: undefined
     },
     required: Boolean,
     name: String,
@@ -189,7 +196,7 @@ var MultiSelectTreeVue2 = {
       return this.opened !== undefined ? this.opened : this.openState;
     },
     computedValue: function computedValue() {
-      return this.value !== undefined ? this.value : this.currentValue;
+      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
     },
     hasValue: function hasValue() {
       return !!this.computedValue.length;
@@ -314,13 +321,13 @@ var MultiSelectTreeVue2 = {
       on: this.v3 ? undefined : {
         "keydown": this.onWrapperKeyDown,
         "mousedown": this.onWrapperMouseDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur,
         "click": this.onWrapperClick
       },
       onMousedown: this.onWrapperMouseDown,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
       role: "combobox",
       "aria-haspopup": "true",
       "aria-expanded": this.isOpen,
@@ -345,7 +352,9 @@ var MultiSelectTreeVue2 = {
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
           return matchTags(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
-        size: size
+        tagsRounded: rounded,
+        size: size,
+        fillMode: fillMode
       },
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
@@ -356,8 +365,10 @@ var MultiSelectTreeVue2 = {
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
         return matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
-      size: size
-    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+      tagsRounded: rounded,
+      size: size,
+      fillMode: fillMode
+    }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -373,7 +384,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 : {
@@ -390,11 +401,13 @@ var MultiSelectTreeVue2 = {
         name: name,
         tabIndex: -1,
         "aria-hidden": true,
+        required: required,
         title: label
       },
       ref: setRef(this, 'select'),
       tabIndex: -1,
       "aria-hidden": true,
+      required: required,
       title: label,
       style: {
         opacity: 0,
@@ -453,12 +466,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 +510,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 +537,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 +579,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,
@@ -617,11 +642,26 @@ var MultiSelectTreeVue2 = {
         this.selectRef.setCustomValidity(validity.valid ? '' : this.validationMessage === undefined ? VALIDATION_MESSAGE : this.validationMessage);
       }
     },
-    changeValue: function changeValue(event, relatedItems, operation) {
+    changeValue: function changeValue(event, items, operation) {
+      var fields = {
+        dataItemKey: this.dataItemKey,
+        checkField: this.checkField,
+        checkIndeterminateField: this.checkIndeterminateField,
+        expandField: this.expandField,
+        subItemsField: this.subItemsField
+      };
+      var value = getMultiSelectTreeValue(this.dataItems, __assign(__assign({}, fields), {
+        items: items,
+        operation: operation,
+        value: this.value
+      }));
       var changeEvent = __assign({
-        items: relatedItems,
-        operation: operation
+        items: items,
+        operation: operation,
+        value: value
       }, event);
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
       this.$emit('change', changeEvent);
     },
     onChange: function onChange(e) {
@@ -701,6 +741,7 @@ var MultiSelectTreeVue2 = {
     },
     onBlur: function onBlur(event) {
       if (this.focusedState && !this.skipFocusRef) {
+        this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
           event: event,
@@ -744,7 +785,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 +810,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 +822,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 +860,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

@@ -17,6 +17,10 @@ export interface MultiSelectTreeChangeEvent extends DropdownEvent {
      * The items related to current operation.
      */
     items: any[];
+    /**
+     * The new value.
+     */
+    value: any[];
     /**
      * Describes the current operation:
      * * `clear` - clear button is clicked and value is cleared. Null value is returned.
@@ -85,9 +89,13 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     opened?: boolean;
     /**
-     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     * Sets the value of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
      */
     value?: Array<any>;
+    /**
+     * Sets the modelValue of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    modelValue?: Array<any>;
     /**
      * The hint that is displayed when the MultiSelectTree is empty.
      */
@@ -161,7 +169,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 +210,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: 1682342566,
     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

@@ -36,6 +36,7 @@ import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { TagList } from '../MultiSelect/TagList.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { ListFilter } from '../common/ListFilter.js';
+import { getMultiSelectTreeValue } from './utils.js';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -59,6 +60,9 @@ var getValidity = function getValidity(parameters, hasValue) {
  */
 var MultiSelectTreeVue2 = {
   name: 'KendoMultiSelectTree',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     open: null,
@@ -67,7 +71,9 @@ var MultiSelectTreeVue2 = {
     blur: null,
     change: null,
     filterChange: null,
-    expandChange: null
+    expandChange: null,
+    'changemodel': null,
+    'update:modelValue': null
   },
   props: {
     opened: {
@@ -85,6 +91,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     value: Array,
+    modelValue: Array,
     valueMap: Function,
     placeholder: String,
     dataItemKey: {
@@ -117,7 +124,7 @@ var MultiSelectTreeVue2 = {
     },
     valid: {
       type: Boolean,
-      default: true
+      default: undefined
     },
     required: Boolean,
     name: String,
@@ -189,7 +196,7 @@ var MultiSelectTreeVue2 = {
       return this.opened !== undefined ? this.opened : this.openState;
     },
     computedValue: function computedValue() {
-      return this.value !== undefined ? this.value : this.currentValue;
+      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
     },
     hasValue: function hasValue() {
       return !!this.computedValue.length;
@@ -314,13 +321,13 @@ var MultiSelectTreeVue2 = {
       on: this.v3 ? undefined : {
         "keydown": this.onWrapperKeyDown,
         "mousedown": this.onWrapperMouseDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur,
         "click": this.onWrapperClick
       },
       onMousedown: this.onWrapperMouseDown,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
       role: "combobox",
       "aria-haspopup": "true",
       "aria-expanded": this.isOpen,
@@ -345,7 +352,9 @@ var MultiSelectTreeVue2 = {
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
           return matchTags(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
-        size: size
+        tagsRounded: rounded,
+        size: size,
+        fillMode: fillMode
       },
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
@@ -356,8 +365,10 @@ var MultiSelectTreeVue2 = {
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
         return matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
-      size: size
-    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+      tagsRounded: rounded,
+      size: size,
+      fillMode: fillMode
+    }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -373,7 +384,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 : {
@@ -390,11 +401,13 @@ var MultiSelectTreeVue2 = {
         name: name,
         tabIndex: -1,
         "aria-hidden": true,
+        required: required,
         title: label
       },
       ref: setRef(this, 'select'),
       tabIndex: -1,
       "aria-hidden": true,
+      required: required,
       title: label,
       style: {
         opacity: 0,
@@ -453,12 +466,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 +510,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 +537,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 +579,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,
@@ -617,11 +642,26 @@ var MultiSelectTreeVue2 = {
         this.selectRef.setCustomValidity(validity.valid ? '' : this.validationMessage === undefined ? VALIDATION_MESSAGE : this.validationMessage);
       }
     },
-    changeValue: function changeValue(event, relatedItems, operation) {
+    changeValue: function changeValue(event, items, operation) {
+      var fields = {
+        dataItemKey: this.dataItemKey,
+        checkField: this.checkField,
+        checkIndeterminateField: this.checkIndeterminateField,
+        expandField: this.expandField,
+        subItemsField: this.subItemsField
+      };
+      var value = getMultiSelectTreeValue(this.dataItems, __assign(__assign({}, fields), {
+        items: items,
+        operation: operation,
+        value: this.value
+      }));
       var changeEvent = __assign({
-        items: relatedItems,
-        operation: operation
+        items: items,
+        operation: operation,
+        value: value
       }, event);
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
       this.$emit('change', changeEvent);
     },
     onChange: function onChange(e) {
@@ -701,6 +741,7 @@ var MultiSelectTreeVue2 = {
     },
     onBlur: function onBlur(event) {
       if (this.focusedState && !this.skipFocusRef) {
+        this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
           event: event,
@@ -744,7 +785,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 +810,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 +822,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 +860,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);
       });