@progress/kendo-vue-dropdowns 4.3.0-dev.202401300902 → 4.3.0-dev.202401301426

package/dist/es/MultiSelect/TagList.d.ts

@@ -23,6 +23,8 @@ export interface TagListProps {
     removeTagIcon: string;
     dataItems: Array<TagData>;
     guid: string;
+    id?: string;
+    className?: string;
     focused?: TagData;
     tagRender?: any;
     size?: null | 'small' | 'medium' | 'large' | string;

package/dist/es/MultiSelect/TagList.js

@@ -11,7 +11,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 // @ts-ignore
-import { getDefaultSlots, getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots, getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
@@ -50,6 +50,8 @@ var TagListVue2 = {
         return ['solid', 'flat', 'outline'].includes(value);
       }
     },
+    id: String,
+    className: String,
     size: {
       type: String,
       default: 'medium',
@@ -90,9 +92,15 @@ var TagListVue2 = {
       size = _a.size,
       disabled = _a.disabled,
       tagsRounded = _a.tagsRounded,
-      removeTagIcon = _a.removeTagIcon;
+      removeTagIcon = _a.removeTagIcon,
+      id = _a.id,
+      className = _a.className;
     return h("div", {
-      "class": 'k-input-values',
+      "class": classNames('k-input-values', className),
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id
+      },
       style: this.$attrs.style
     }, [h("div", {
       "class": this.wrapperClass,

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -303,6 +303,7 @@ var MultiSelectTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
     var _a, _b;
     var _this = this;
     var h = gh || createElement;
@@ -589,15 +590,10 @@ var MultiSelectTreeVue2 = {
       "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
       "aria-required": this.$props.required,
       onClick: this.onWrapperClick
-    }, [h("div", {
-      id: 'tagslist-' + id,
-      attrs: this.v3 ? undefined : {
-        id: 'tagslist-' + id
-      },
-      "class": classNames('k-input-values k-chip-list k-selection-multiple', (_b = {}, _b["k-chip-list-".concat(sizeMap[size] || size)] = size, _b['k-readonly'] = this.hasValue, _b))
     }, [this.tagsToRenderRef.length > 0 && h(TagList, {
-      tagRender: tagTemplate,
+      id: 'tagslist-' + id,
       attrs: this.v3 ? undefined : {
+        id: 'tagslist-' + id,
         tagRender: tagTemplate,
         dataItems: this.tagsToRenderRef,
         guid: id,
@@ -608,6 +604,8 @@ var MultiSelectTreeVue2 = {
         size: size,
         fillMode: fillMode
       },
+      "class": classNames('k-input-values k-chip-list k-selection-multiple', (_b = {}, _b["k-chip-list-".concat(sizeMap[size] || size)] = size, _b['k-readonly'] = this.hasValue, _b)),
+      tagRender: tagTemplate,
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
         "tagdelete": this.onTagDelete
@@ -634,9 +632,9 @@ var MultiSelectTreeVue2 = {
       "aria-expanded": this.isOpen,
       "aria-describedby": 'tagslist-' + id,
       "aria-label": this.$props.ariaLabelledBy
-    }, [this.tagsToRender.length === 0 && h("span", {
+    }, [this.tagsToRenderRef.length === 0 && h("span", {
       "class": "k-input-value-text"
-    }, [placeholder])])]), this.$props.loading && h(Icon, {
+    }, [placeholder])]), this.$props.loading && h(Icon, {
       "class": "k-input-loading-icon",
       name: "loading",
       attrs: this.v3 ? undefined : {
@@ -674,9 +672,9 @@ var MultiSelectTreeVue2 = {
       domProps: this.v3 ? undefined : {
         "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
       }
-    })]),
+    })]), !renderAdaptive &&
     // @ts-ignore function children
-    !renderAdaptive && h(Popup, {
+    h(Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -703,45 +701,115 @@ var MultiSelectTreeVue2 = {
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo,
       ref: setRef(this, 'popup')
-    }, [this.$props.filterable &&
-    // @ts-ignore
-    h(ListFilter, {
-      value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
-      attrs: this.v3 ? undefined : {
-        value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
+    }, this.v3 ? function () {
+      return [_this2.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this2, 'input'),
+        onChange: _this2.onFilterChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.onFilterChange,
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
+        },
+        onKeydown: _this2.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
+      }), header && h("div", {
+        "class": "k-list-header"
+      }, [header]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this2, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          checkField: checkField,
+          checkIndeterminateField: checkIndeterminateField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          checkboxes: true,
+          size: size,
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this2.onChange,
+        on: _this2.v3 ? undefined : {
+          "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,
+        size: size,
+        item: itemTemplate
+      }) : noDataTemplate, footer && h("div", {
+        "class": "k-list-footer"
+      }, [footer])];
+    } : [_this2.$props.filterable && h(ListFilter, {
+      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       },
-      ref: setRef(this, 'input'),
-      onChange: this.onFilterChange,
-      on: this.v3 ? undefined : {
-        "change": this.onFilterChange,
-        "keydown": this.onInputKeyDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur
+      ref: setRef(_this2, 'input'),
+      onChange: _this2.onFilterChange,
+      on: _this2.v3 ? undefined : {
+        "change": _this2.onFilterChange,
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
-      onKeydown: this.onInputKeyDown,
+      onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
       fillMode: fillMode,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ?
-    // @ts-ignore
-    h(TreeView, {
-      ref: setRef(this, 'treeView'),
+    }, [header]), dataItems.length > 0 ? h(TreeView, {
+      ref: setRef(_this2, 'treeView'),
       tabIndex: tabIndex,
-      attrs: this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         tabIndex: tabIndex,
         dataItems: dataItems,
         focusIdField: dataItemKey,
-        textField: this.$props.textField,
+        textField: _this2.$props.textField,
         checkField: checkField,
         checkIndeterminateField: checkIndeterminateField,
-        expandField: this.$props.expandField,
+        expandField: _this2.$props.expandField,
         childrenField: subItemsField,
         expandIcons: true,
         checkboxes: true,
@@ -750,26 +818,26 @@ var MultiSelectTreeVue2 = {
       },
       dataItems: dataItems,
       focusIdField: dataItemKey,
-      textField: this.$props.textField,
+      textField: _this2.$props.textField,
       checkField: checkField,
       checkIndeterminateField: checkIndeterminateField,
-      expandField: this.$props.expandField,
+      expandField: _this2.$props.expandField,
       childrenField: subItemsField,
       expandIcons: true,
-      onItemclick: this.onChange,
-      on: this.v3 ? undefined : {
-        "itemclick": this.onChange,
-        "checkchange": this.onChange,
-        "expandchange": this.onExpand,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "keydown": this.onWrapperKeyDown
+      onItemclick: _this2.onChange,
+      on: _this2.v3 ? undefined : {
+        "itemclick": _this2.onChange,
+        "checkchange": _this2.onChange,
+        "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur,
+        "keydown": _this2.onWrapperKeyDown
       },
-      onCheckchange: this.onChange,
-      onExpandchange: this.onExpand,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeydown: this.onWrapperKeyDown,
+      onCheckchange: _this2.onChange,
+      onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur,
+      onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
       size: size,
       item: itemTemplate
@@ -805,11 +873,7 @@ var MultiSelectTreeVue2 = {
   },
   methods: {
     clearFilter: function clearFilter(event) {
-      this.onFilterChange(__assign(__assign({}, event), {
-        target: __assign(__assign({}, event.target), {
-          value: ''
-        })
-      }));
+      this.onFilterChange(event, '');
     },
     onCancel: function onCancel(event) {
       var dropdownEvent = {
@@ -898,7 +962,9 @@ var MultiSelectTreeVue2 = {
       }
     },
     closePopup: function closePopup(event) {
-      this.clearFilter(event);
+      if (this.$props.filterable) {
+        this.clearFilter(event);
+      }
       if (this.isOpen) {
         var closeEvent = __assign({}, event);
         this.$emit('close', closeEvent);
@@ -1124,11 +1190,12 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('expandchange', expandEvent);
     },
-    onFilterChange: function onFilterChange(event) {
+    onFilterChange: function onFilterChange(event, emptyValue) {
+      var newValue = emptyValue ? '' : event.target.value;
       var filterDesc = {
         field: this.$props.textField,
         operator: 'contains',
-        value: event.target.value
+        value: newValue
       };
       var ev = {
         filter: filterDesc,
@@ -1137,7 +1204,7 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('filterchange', ev);
       if (this.$props.filter === undefined) {
-        this.filterState = event.target.value;
+        this.filterState = newValue;
       }
     }
   }

package/dist/es/common/GroupStickyHeader.js

@@ -22,6 +22,7 @@ import { getTemplate } from '@progress/kendo-vue-common';
  */
 var GroupStickyHeaderVue2 = {
   name: 'KendoGroupStickyHeader',
+  inheritAttrs: false,
   props: {
     group: String,
     render: Object

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: 1706604833,
+    publishDate: 1706624233,
     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/MultiSelect/TagList.d.ts

@@ -23,6 +23,8 @@ export interface TagListProps {
     removeTagIcon: string;
     dataItems: Array<TagData>;
     guid: string;
+    id?: string;
+    className?: string;
     focused?: TagData;
     tagRender?: any;
     size?: null | 'small' | 'medium' | 'large' | string;

package/dist/esm/MultiSelect/TagList.js

@@ -11,7 +11,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 // @ts-ignore
-import { getDefaultSlots, getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots, getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
@@ -50,6 +50,8 @@ var TagListVue2 = {
         return ['solid', 'flat', 'outline'].includes(value);
       }
     },
+    id: String,
+    className: String,
     size: {
       type: String,
       default: 'medium',
@@ -90,9 +92,15 @@ var TagListVue2 = {
       size = _a.size,
       disabled = _a.disabled,
       tagsRounded = _a.tagsRounded,
-      removeTagIcon = _a.removeTagIcon;
+      removeTagIcon = _a.removeTagIcon,
+      id = _a.id,
+      className = _a.className;
     return h("div", {
-      "class": 'k-input-values',
+      "class": classNames('k-input-values', className),
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id
+      },
       style: this.$attrs.style
     }, [h("div", {
       "class": this.wrapperClass,

package/dist/esm/MultiSelectTree/MultiSelectTree.js

@@ -303,6 +303,7 @@ var MultiSelectTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
     var _a, _b;
     var _this = this;
     var h = gh || createElement;
@@ -589,15 +590,10 @@ var MultiSelectTreeVue2 = {
       "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
       "aria-required": this.$props.required,
       onClick: this.onWrapperClick
-    }, [h("div", {
-      id: 'tagslist-' + id,
-      attrs: this.v3 ? undefined : {
-        id: 'tagslist-' + id
-      },
-      "class": classNames('k-input-values k-chip-list k-selection-multiple', (_b = {}, _b["k-chip-list-".concat(sizeMap[size] || size)] = size, _b['k-readonly'] = this.hasValue, _b))
     }, [this.tagsToRenderRef.length > 0 && h(TagList, {
-      tagRender: tagTemplate,
+      id: 'tagslist-' + id,
       attrs: this.v3 ? undefined : {
+        id: 'tagslist-' + id,
         tagRender: tagTemplate,
         dataItems: this.tagsToRenderRef,
         guid: id,
@@ -608,6 +604,8 @@ var MultiSelectTreeVue2 = {
         size: size,
         fillMode: fillMode
       },
+      "class": classNames('k-input-values k-chip-list k-selection-multiple', (_b = {}, _b["k-chip-list-".concat(sizeMap[size] || size)] = size, _b['k-readonly'] = this.hasValue, _b)),
+      tagRender: tagTemplate,
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
         "tagdelete": this.onTagDelete
@@ -634,9 +632,9 @@ var MultiSelectTreeVue2 = {
       "aria-expanded": this.isOpen,
       "aria-describedby": 'tagslist-' + id,
       "aria-label": this.$props.ariaLabelledBy
-    }, [this.tagsToRender.length === 0 && h("span", {
+    }, [this.tagsToRenderRef.length === 0 && h("span", {
       "class": "k-input-value-text"
-    }, [placeholder])])]), this.$props.loading && h(Icon, {
+    }, [placeholder])]), this.$props.loading && h(Icon, {
       "class": "k-input-loading-icon",
       name: "loading",
       attrs: this.v3 ? undefined : {
@@ -674,9 +672,9 @@ var MultiSelectTreeVue2 = {
       domProps: this.v3 ? undefined : {
         "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
       }
-    })]),
+    })]), !renderAdaptive &&
     // @ts-ignore function children
-    !renderAdaptive && h(Popup, {
+    h(Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -703,45 +701,115 @@ var MultiSelectTreeVue2 = {
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo,
       ref: setRef(this, 'popup')
-    }, [this.$props.filterable &&
-    // @ts-ignore
-    h(ListFilter, {
-      value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
-      attrs: this.v3 ? undefined : {
-        value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
+    }, this.v3 ? function () {
+      return [_this2.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this2, 'input'),
+        onChange: _this2.onFilterChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.onFilterChange,
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
+        },
+        onKeydown: _this2.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
+      }), header && h("div", {
+        "class": "k-list-header"
+      }, [header]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this2, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          checkField: checkField,
+          checkIndeterminateField: checkIndeterminateField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          checkboxes: true,
+          size: size,
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this2.onChange,
+        on: _this2.v3 ? undefined : {
+          "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,
+        size: size,
+        item: itemTemplate
+      }) : noDataTemplate, footer && h("div", {
+        "class": "k-list-footer"
+      }, [footer])];
+    } : [_this2.$props.filterable && h(ListFilter, {
+      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       },
-      ref: setRef(this, 'input'),
-      onChange: this.onFilterChange,
-      on: this.v3 ? undefined : {
-        "change": this.onFilterChange,
-        "keydown": this.onInputKeyDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur
+      ref: setRef(_this2, 'input'),
+      onChange: _this2.onFilterChange,
+      on: _this2.v3 ? undefined : {
+        "change": _this2.onFilterChange,
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
-      onKeydown: this.onInputKeyDown,
+      onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
       fillMode: fillMode,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ?
-    // @ts-ignore
-    h(TreeView, {
-      ref: setRef(this, 'treeView'),
+    }, [header]), dataItems.length > 0 ? h(TreeView, {
+      ref: setRef(_this2, 'treeView'),
       tabIndex: tabIndex,
-      attrs: this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         tabIndex: tabIndex,
         dataItems: dataItems,
         focusIdField: dataItemKey,
-        textField: this.$props.textField,
+        textField: _this2.$props.textField,
         checkField: checkField,
         checkIndeterminateField: checkIndeterminateField,
-        expandField: this.$props.expandField,
+        expandField: _this2.$props.expandField,
         childrenField: subItemsField,
         expandIcons: true,
         checkboxes: true,
@@ -750,26 +818,26 @@ var MultiSelectTreeVue2 = {
       },
       dataItems: dataItems,
       focusIdField: dataItemKey,
-      textField: this.$props.textField,
+      textField: _this2.$props.textField,
       checkField: checkField,
       checkIndeterminateField: checkIndeterminateField,
-      expandField: this.$props.expandField,
+      expandField: _this2.$props.expandField,
       childrenField: subItemsField,
       expandIcons: true,
-      onItemclick: this.onChange,
-      on: this.v3 ? undefined : {
-        "itemclick": this.onChange,
-        "checkchange": this.onChange,
-        "expandchange": this.onExpand,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "keydown": this.onWrapperKeyDown
+      onItemclick: _this2.onChange,
+      on: _this2.v3 ? undefined : {
+        "itemclick": _this2.onChange,
+        "checkchange": _this2.onChange,
+        "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur,
+        "keydown": _this2.onWrapperKeyDown
       },
-      onCheckchange: this.onChange,
-      onExpandchange: this.onExpand,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeydown: this.onWrapperKeyDown,
+      onCheckchange: _this2.onChange,
+      onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur,
+      onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
       size: size,
       item: itemTemplate
@@ -805,11 +873,7 @@ var MultiSelectTreeVue2 = {
   },
   methods: {
     clearFilter: function clearFilter(event) {
-      this.onFilterChange(__assign(__assign({}, event), {
-        target: __assign(__assign({}, event.target), {
-          value: ''
-        })
-      }));
+      this.onFilterChange(event, '');
     },
     onCancel: function onCancel(event) {
       var dropdownEvent = {
@@ -898,7 +962,9 @@ var MultiSelectTreeVue2 = {
       }
     },
     closePopup: function closePopup(event) {
-      this.clearFilter(event);
+      if (this.$props.filterable) {
+        this.clearFilter(event);
+      }
       if (this.isOpen) {
         var closeEvent = __assign({}, event);
         this.$emit('close', closeEvent);
@@ -1124,11 +1190,12 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('expandchange', expandEvent);
     },
-    onFilterChange: function onFilterChange(event) {
+    onFilterChange: function onFilterChange(event, emptyValue) {
+      var newValue = emptyValue ? '' : event.target.value;
       var filterDesc = {
         field: this.$props.textField,
         operator: 'contains',
-        value: event.target.value
+        value: newValue
       };
       var ev = {
         filter: filterDesc,
@@ -1137,7 +1204,7 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('filterchange', ev);
       if (this.$props.filter === undefined) {
-        this.filterState = event.target.value;
+        this.filterState = newValue;
       }
     }
   }