@progress/kendo-vue-dropdowns 4.0.0 → 4.0.1-dev.202310191530

package/dist/es/AutoComplete/AutoComplete.js

@@ -81,7 +81,7 @@ var AutoCompleteVue2 = {
     },
     tabIndex: {
       type: Number,
-      default: 0
+      default: undefined
     },
     readonly: Boolean,
     accessKey: String,
@@ -594,7 +594,7 @@ var AutoCompleteVue2 = {
           attrs: this.v3 ? undefined : {
             id: searchId,
             placeholder: placeholder,
-            tabIndex: tabIndex || undefined,
+            tabIndex: tabIndex,
             accessKey: this.$props.accessKey,
             value: searchValue,
             suggestedText: this.suggested,
@@ -610,7 +610,7 @@ var AutoCompleteVue2 = {
             ariaLabel: this.$props.ariaLabel
           },
           placeholder: placeholder,
-          tabIndex: tabIndex || undefined,
+          tabIndex: tabIndex,
           accessKey: this.$props.accessKey,
           value: searchValue,
           suggestedText: this.suggested,

package/dist/es/ComboBox/ComboBox.js

@@ -822,30 +822,29 @@ var ComboBoxVue2 = {
     }
   },
   render: function render(createElement) {
-    var _a;
     var _this = this;
     var h = gh || createElement;
-    var _b = this.$props,
-      dir = _b.dir,
-      disabled = _b.disabled,
-      clearButton = _b.clearButton,
-      label = _b.label,
-      textField = _b.textField,
-      className = _b.className,
-      style = _b.style,
-      loading = _b.loading,
-      icon = _b.icon,
-      svgIcon = _b.svgIcon,
-      iconClassName = _b.iconClassName,
-      virtual = _b.virtual,
-      size = _b.size,
-      fillMode = _b.fillMode,
-      rounded = _b.rounded,
-      adaptiveTitle = _b.adaptiveTitle,
-      header = _b.header,
-      footer = _b.footer,
-      groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender,
-      placeholder = _b.placeholder;
+    var _a = this.$props,
+      dir = _a.dir,
+      disabled = _a.disabled,
+      clearButton = _a.clearButton,
+      label = _a.label,
+      textField = _a.textField,
+      className = _a.className,
+      style = _a.style,
+      loading = _a.loading,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon,
+      iconClassName = _a.iconClassName,
+      virtual = _a.virtual,
+      size = _a.size,
+      fillMode = _a.fillMode,
+      rounded = _a.rounded,
+      adaptiveTitle = _a.adaptiveTitle,
+      header = _a.header,
+      footer = _a.footer,
+      groupStickyHeaderItemRender = _a.groupStickyHeaderItemRender,
+      placeholder = _a.placeholder;
     var focused = this.currentFocused;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
@@ -1220,70 +1219,73 @@ var ComboBoxVue2 = {
         })
       );
     };
-    var comboboxDefault = h("span", {
-      "class": classNames('k-combobox k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
-      ref: setRef(this, 'kendoAnchor', this.anchor),
-      style: !label ? style : __assign(__assign({}, style), {
-        width: undefined
+    var comboboxDefault = function comboboxDefault() {
+      var _a;
+      return h("span", {
+        "class": classNames('k-combobox k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
+        ref: setRef(this, 'kendoAnchor', this.anchor),
+        style: !label ? style : __assign(__assign({}, style), {
+          width: undefined
+        }),
+        dir: dir,
+        attrs: this.v3 ? undefined : {
+          dir: dir
+        }
+      }, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading &&
+      // @ts-ignore  function children
+      h(ClearButton, {
+        onClearclick: this.clearButtonClick,
+        on: this.v3 ? undefined : {
+          "clearclick": this.clearButtonClick
+        },
+        key: "clearbutton"
+      }), loading && h(Icon, {
+        name: 'loading',
+        attrs: this.v3 ? undefined : {
+          name: 'loading'
+        },
+        "class": "k-input-loading-icon",
+        key: "loading"
       }),
-      dir: dir,
-      attrs: this.v3 ? undefined : {
-        dir: dir
-      }
-    }, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading &&
-    // @ts-ignore  function children
-    h(ClearButton, {
-      onClearclick: this.clearButtonClick,
-      on: this.v3 ? undefined : {
-        "clearclick": this.clearButtonClick
-      },
-      key: "clearbutton"
-    }), loading && h(Icon, {
-      name: 'loading',
-      attrs: this.v3 ? undefined : {
-        name: 'loading'
-      },
-      "class": "k-input-loading-icon",
-      key: "loading"
-    }),
-    // @ts-ignore
-    h(KButton, {
-      type: "button",
-      attrs: this.v3 ? undefined : {
+      // @ts-ignore
+      h(KButton, {
         type: "button",
+        attrs: this.v3 ? undefined : {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": ariaLabelExpandButton,
+          size: size,
+          fillMode: fillMode,
+          rounded: null,
+          icon: icon || 'caret-alt-down',
+          svgIcon: svgIcon || caretAltDownIcon,
+          iconClass: iconClassName
+        },
         tabIndex: -1,
         "aria-label": ariaLabelExpandButton,
         size: size,
         fillMode: fillMode,
         rounded: null,
+        "class": 'k-input-button',
         icon: icon || 'caret-alt-down',
         svgIcon: svgIcon || caretAltDownIcon,
-        iconClass: iconClassName
-      },
-      tabIndex: -1,
-      "aria-label": ariaLabelExpandButton,
-      size: size,
-      fillMode: fillMode,
-      rounded: null,
-      "class": 'k-input-button',
-      icon: icon || 'caret-alt-down',
-      svgIcon: svgIcon || caretAltDownIcon,
-      iconClass: iconClassName,
-      onClick: this.toggleBtnClick,
-      on: this.v3 ? undefined : {
-        "click": this.toggleBtnClick,
-        "mousedown": function mousedown(e) {
+        iconClass: iconClassName,
+        onClick: this.toggleBtnClick,
+        on: this.v3 ? undefined : {
+          "click": this.toggleBtnClick,
+          "mousedown": function mousedown(e) {
+            return e.preventDefault();
+          }
+        },
+        onMousedown: function mousedown(e) {
           return e.preventDefault();
         }
-      },
-      onMousedown: function mousedown(e) {
-        return e.preventDefault();
-      }
-    }), !renderAdaptive && renderListContainer.call(this)]);
+      }), !renderAdaptive && renderListContainer.call(this)]);
+    };
     // The following one combines the default rendering of the Combobox and the Adaptive rendering.
     // This is needed because of Vue 2 specifics
-    var combobox = [comboboxDefault, renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var comboboxToRender = isV3 ? combobox : this.$props.adaptive ? h("span", [combobox]) : comboboxDefault;
+    var combobox = [isV3 ? h(comboboxDefault.call(this), __assign({}, this.$attrs)) : comboboxDefault.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var comboboxToRender = isV3 ? combobox : renderAdaptive ? h("div", [combobox]) : comboboxDefault.call(this);
     return label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,

package/dist/es/DropDownList/DropDownList.js

@@ -807,34 +807,33 @@ var DropDownListVue2 = {
     }
   },
   render: function render(createElement) {
-    var _a;
     var _this = this;
     var h = gh || createElement;
-    var _b = this.$props,
-      style = _b.style,
-      className = _b.className,
-      label = _b.label,
-      dir = _b.dir,
-      _c = _b.virtual,
-      virtual = _c === void 0 ? {
+    var _a = this.$props,
+      style = _a.style,
+      className = _a.className,
+      label = _a.label,
+      dir = _a.dir,
+      _b = _a.virtual,
+      virtual = _b === void 0 ? {
         skip: 0
-      } : _c,
-      size = _b.size,
-      rounded = _b.rounded,
-      fillMode = _b.fillMode,
-      dataItemKey = _b.dataItemKey,
-      _d = _b.dataItems,
-      dataItems = _d === void 0 ? [] : _d,
-      disabled = _b.disabled,
-      tabIndex = _b.tabIndex,
-      loading = _b.loading,
-      icon = _b.icon,
-      svgIcon = _b.svgIcon,
-      iconClassName = _b.iconClassName,
-      adaptiveTitle = _b.adaptiveTitle,
-      header = _b.header,
-      footer = _b.footer,
-      groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
+      } : _b,
+      size = _a.size,
+      rounded = _a.rounded,
+      fillMode = _a.fillMode,
+      dataItemKey = _a.dataItemKey,
+      _c = _a.dataItems,
+      dataItems = _c === void 0 ? [] : _c,
+      disabled = _a.disabled,
+      tabIndex = _a.tabIndex,
+      loading = _a.loading,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon,
+      iconClassName = _a.iconClassName,
+      adaptiveTitle = _a.adaptiveTitle,
+      header = _a.header,
+      footer = _a.footer,
+      groupStickyHeaderItemRender = _a.groupStickyHeaderItemRender;
     var opened = this.isOpen;
     var text = getItemValue(this.computedValue(), this.$props.textField);
     var isValid = !this.$props.validityStyles || this.validity().valid;
@@ -1193,18 +1192,47 @@ var DropDownListVue2 = {
       // @ts-ignore
       base.vs.pageSize = virtual.pageSize;
     }
-    var dropdownlistDefault = h("span", {
-      ref: setRef(this, 'kendoAnchor', this.anchor),
-      "class": classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-picker-".concat(fillMode)] = fillMode, _a['k-focus'] = focused, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
-      style: !label ? style : __assign(__assign({}, style), {
-        width: undefined
-      }),
-      dir: dir,
-      attrs: this.v3 ? undefined : {
+    var dropdownlistDefault = function dropdownlistDefault() {
+      var _a;
+      return h("span", {
+        ref: setRef(this, 'kendoAnchor', this.anchor),
+        "class": classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-picker-".concat(fillMode)] = fillMode, _a['k-focus'] = focused, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
+        style: !label ? style : __assign(__assign({}, style), {
+          width: undefined
+        }),
         dir: dir,
+        attrs: this.v3 ? undefined : {
+          dir: dir,
+          tabindex: getTabIndex(tabIndex, disabled),
+          accesskey: this.$props.accessKey,
+          role: 'combobox',
+          "aria-disabled": disabled || undefined,
+          "aria-haspopup": true,
+          "aria-expanded": opened || false,
+          "aria-owns": this.base.listBoxId,
+          "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
+          "aria-label": this.$props.ariaLabel || this.$props.label,
+          "aria-labelledby": this.$props.ariaLabelledBy,
+          "aria-describedBy": this.dropDownListId,
+          title: this.$props.title
+        },
+        onMousedown: opened ? preventDefaultNonInputs : noop,
+        on: this.v3 ? undefined : {
+          "mousedown": opened ? preventDefaultNonInputs : noop,
+          "focusin": this.handleFocus,
+          "focusout": this.handleBlur,
+          "keydown": this.handleKeyDown,
+          "keypress": this.handleKeyPress,
+          "click": disabled ? noop : this.handleWrapperClick
+        },
+        onFocusin: this.handleFocus,
+        onFocusout: this.handleBlur,
         tabindex: getTabIndex(tabIndex, disabled),
         accesskey: this.$props.accessKey,
+        onKeydown: this.handleKeyDown,
+        onKeypress: this.handleKeyPress,
         role: 'combobox',
+        onClick: disabled ? noop : this.handleWrapperClick,
         "aria-disabled": disabled || undefined,
         "aria-haspopup": true,
         "aria-expanded": opened || false,
@@ -1214,71 +1242,45 @@ var DropDownListVue2 = {
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedBy": this.dropDownListId,
         title: this.$props.title
-      },
-      onMousedown: opened ? preventDefaultNonInputs : noop,
-      on: this.v3 ? undefined : {
-        "mousedown": opened ? preventDefaultNonInputs : noop,
-        "focusin": this.handleFocus,
-        "focusout": this.handleBlur,
-        "keydown": this.handleKeyDown,
-        "keypress": this.handleKeyPress,
-        "click": disabled ? noop : this.handleWrapperClick
-      },
-      onFocusin: this.handleFocus,
-      onFocusout: this.handleBlur,
-      tabindex: getTabIndex(tabIndex, disabled),
-      accesskey: this.$props.accessKey,
-      onKeydown: this.handleKeyDown,
-      onKeypress: this.handleKeyPress,
-      role: 'combobox',
-      onClick: disabled ? noop : this.handleWrapperClick,
-      "aria-disabled": disabled || undefined,
-      "aria-haspopup": true,
-      "aria-expanded": opened || false,
-      "aria-owns": this.base.listBoxId,
-      "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
-      "aria-label": this.$props.ariaLabel || this.$props.label,
-      "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedBy": this.dropDownListId,
-      title: this.$props.title
-    }, [valueElement, loading && h(Icon, {
-      name: 'loading',
-      attrs: this.v3 ? undefined : {
-        name: 'loading'
-      },
-      "class": "k-input-loading-icon",
-      key: "loading"
-    }),
-    // @ts-ignore
-    h(KButton, {
-      type: "button",
-      attrs: this.v3 ? undefined : {
+      }, [valueElement, loading && h(Icon, {
+        name: 'loading',
+        attrs: this.v3 ? undefined : {
+          name: 'loading'
+        },
+        "class": "k-input-loading-icon",
+        key: "loading"
+      }),
+      // @ts-ignore
+      h(KButton, {
         type: "button",
+        attrs: this.v3 ? undefined : {
+          type: "button",
+          tabIndex: -1,
+          size: size,
+          fillMode: fillMode,
+          rounded: null,
+          ariaLabel: ariaLabelSelectButton,
+          icon: icon || 'caret-alt-down',
+          svgIcon: svgIcon || caretAltDownIcon,
+          iconClass: iconClassName,
+          "aria-hidden": true
+        },
         tabIndex: -1,
         size: size,
         fillMode: fillMode,
         rounded: null,
         ariaLabel: ariaLabelSelectButton,
+        "class": 'k-input-button',
         icon: icon || 'caret-alt-down',
         svgIcon: svgIcon || caretAltDownIcon,
         iconClass: iconClassName,
         "aria-hidden": true
-      },
-      tabIndex: -1,
-      size: size,
-      fillMode: fillMode,
-      rounded: null,
-      ariaLabel: ariaLabelSelectButton,
-      "class": 'k-input-button',
-      icon: icon || 'caret-alt-down',
-      svgIcon: svgIcon || caretAltDownIcon,
-      iconClass: iconClassName,
-      "aria-hidden": true
-    }), dummySelect.call(this, value), !renderAdaptive && renderListContainer.call(this)]);
+      }), dummySelect.call(this, value), !renderAdaptive && renderListContainer.call(this)]);
+    };
     // The following one combines the default rendering of the DropDownList and the Adaptive rendering.
     // This is needed because of Vue 2 specifics
-    var dropdownlist = [dropdownlistDefault, renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var dropdownlistToRender = isV3 ? dropdownlist : this.$props.adaptive ? h("span", [dropdownlist]) : dropdownlistDefault;
+    var dropdownlist = [isV3 ? h(dropdownlistDefault.call(this), __assign({}, this.$attrs)) : dropdownlistDefault.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var dropdownlistToRender = isV3 ? dropdownlist : renderAdaptive ? h("div", [dropdownlist]) : dropdownlistDefault.call(this);
     return label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,

package/dist/es/MultiSelect/MultiSelect.js

@@ -970,31 +970,29 @@ var MultiSelectVue2 = {
     }
   },
   render: function render(createElement) {
-    var _this4 = this;
-    var _a;
     var _this = this;
     var h = gh || createElement;
-    var _b = this.$props,
-      style = _b.style,
-      label = _b.label,
-      dir = _b.dir,
-      disabled = _b.disabled,
-      tags = _b.tags,
-      textField = _b.textField,
-      dataItemKey = _b.dataItemKey,
-      virtual = _b.virtual,
-      loading = _b.loading,
-      size = _b.size,
-      fillMode = _b.fillMode,
-      rounded = _b.rounded,
-      tagsRounded = _b.tagsRounded,
-      removeTagIcon = _b.removeTagIcon,
-      adaptiveTitle = _b.adaptiveTitle,
-      header = _b.header,
-      footer = _b.footer,
-      groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender,
-      _c = _b.dataItems,
-      dataItems = _c === void 0 ? [] : _c;
+    var _a = this.$props,
+      style = _a.style,
+      label = _a.label,
+      dir = _a.dir,
+      disabled = _a.disabled,
+      tags = _a.tags,
+      textField = _a.textField,
+      dataItemKey = _a.dataItemKey,
+      virtual = _a.virtual,
+      loading = _a.loading,
+      size = _a.size,
+      fillMode = _a.fillMode,
+      rounded = _a.rounded,
+      tagsRounded = _a.tagsRounded,
+      removeTagIcon = _a.removeTagIcon,
+      adaptiveTitle = _a.adaptiveTitle,
+      header = _a.header,
+      footer = _a.footer,
+      groupStickyHeaderItemRender = _a.groupStickyHeaderItemRender,
+      _b = _a.dataItems,
+      dataItems = _b === void 0 ? [] : _b;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -1020,7 +1018,7 @@ var MultiSelectVue2 = {
       vs.pageSize = virtual.pageSize;
     }
     var tagsToRender = [];
-    if (this.initialAdaptiveRenderingValues === undefined) {
+    if (!this.initialAdaptiveRenderingValues) {
       if (tags === undefined) {
         this.computedValue().forEach(function (item) {
           tagsToRender.push({
@@ -1425,69 +1423,73 @@ var MultiSelectVue2 = {
         navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
       });
     };
-    var component = h("span", {
-      ref: setRef(this, 'kendoAnchor', this.anchor),
-      "class": classNames('k-multiselect', 'k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = focused && !disabled, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
-      style: !label ? style : __assign(__assign({}, style), {
-        width: undefined
-      }),
-      dir: dir,
-      attrs: this.v3 ? undefined : {
-        dir: dir
-      },
-      onFocusin: this.handleFocus,
-      on: this.v3 ? undefined : {
-        "focusin": this.handleFocus,
-        "click": this.handleWrapperClick,
-        "mousedown": preventDefaultNonInputs
-      },
-      onClick: this.handleWrapperClick,
-      onMousedown: preventDefaultNonInputs
-    }, [
-    // @ts-ignore  function children
-    h(TagList, {
-      removeTagIcon: removeTagIcon,
-      attrs: this.v3 ? undefined : {
+    var multiSelectDefault = function multiSelectDefault() {
+      var _this4 = this;
+      var _a;
+      return h("span", {
+        ref: setRef(this, 'kendoAnchor', this.anchor),
+        "class": classNames('k-multiselect', 'k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = focused && !disabled, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
+        style: !label ? style : __assign(__assign({}, style), {
+          width: undefined
+        }),
+        dir: dir,
+        attrs: this.v3 ? undefined : {
+          dir: dir
+        },
+        onFocusin: this.handleFocus,
+        on: this.v3 ? undefined : {
+          "focusin": this.handleFocus,
+          "click": this.handleWrapperClick,
+          "mousedown": preventDefaultNonInputs
+        },
+        onClick: this.handleWrapperClick,
+        onMousedown: preventDefaultNonInputs
+      }, [
+      // @ts-ignore  function children
+      h(TagList, {
         removeTagIcon: removeTagIcon,
+        attrs: this.v3 ? undefined : {
+          removeTagIcon: removeTagIcon,
+          tagsRounded: tagsRounded,
+          size: size,
+          fillMode: fillMode,
+          tagRender: tagRender,
+          dataItems: tagsToRender,
+          guid: this.base.guid,
+          focused: focusedTag ? tagsToRender.find(function (t) {
+            return matchTags(t, focusedTag, dataItemKey);
+          }) : undefined
+        },
         tagsRounded: tagsRounded,
         size: size,
         fillMode: fillMode,
         tagRender: tagRender,
+        onTagdelete: this.onTagDelete,
+        on: this.v3 ? undefined : {
+          "tagdelete": this.onTagDelete
+        },
         dataItems: tagsToRender,
         guid: this.base.guid,
         focused: focusedTag ? tagsToRender.find(function (t) {
           return matchTags(t, focusedTag, dataItemKey);
         }) : undefined
-      },
-      tagsRounded: tagsRounded,
-      size: size,
-      fillMode: fillMode,
-      tagRender: tagRender,
-      onTagdelete: this.onTagDelete,
-      on: this.v3 ? undefined : {
-        "tagdelete": this.onTagDelete
-      },
-      dataItems: tagsToRender,
-      guid: this.base.guid,
-      focused: focusedTag ? tagsToRender.find(function (t) {
-        return matchTags(t, focusedTag, dataItemKey);
-      }) : undefined
-    }, this.v3 ? function () {
-      return [renderSearchBar.call(_this4, id)];
-    } : [renderSearchBar.call(_this4, id)]), tagsToRender.length > 0 && clearButton &&
-    // @ts-ignore  function children
-    h(ClearButton, {
-      onClearclick: this.clearButtonClick,
-      on: this.v3 ? undefined : {
-        "clearclick": this.clearButtonClick
-      }
-    }), h("span", {
-      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
-    }), !renderAdaptive && renderListContainer.call(this)]);
+      }, this.v3 ? function () {
+        return [renderSearchBar.call(_this4, id)];
+      } : [renderSearchBar.call(_this4, id)]), tagsToRender.length > 0 && clearButton &&
+      // @ts-ignore  function children
+      h(ClearButton, {
+        onClearclick: this.clearButtonClick,
+        on: this.v3 ? undefined : {
+          "clearclick": this.clearButtonClick
+        }
+      }), h("span", {
+        "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+      }), !renderAdaptive && renderListContainer.call(this)]);
+    };
     // The following one combines the default rendering of the MultiSelect and the Adaptive rendering.
     // This is needed because of Vue 2 specifics
-    var multiselect = [component, renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var multiselectToRender = isV3 ? multiselect : this.$props.adaptive ? h("span", [multiselect]) : component;
+    var multiselect = [isV3 ? h(multiSelectDefault.call(this), __assign({}, this.$attrs)) : multiSelectDefault.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var multiselectToRender = isV3 ? multiselect : renderAdaptive ? h("div", [multiselect]) : multiSelectDefault.call(this);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,

package/dist/es/common/DropDownBase.js

@@ -165,7 +165,7 @@ var DropDownBase = /** @class */function () {
     }
   };
   DropDownBase.prototype.calculatePopupWidth = function () {
-    if (this.wrapper) {
+    if (this.wrapper && !this.popupWidth) {
       this.popupWidth = this.wrapper.offsetWidth + 'px';
     }
   };

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: 1696942204,
+    publishDate: 1697728770,
     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/AutoComplete/AutoComplete.js

@@ -81,7 +81,7 @@ var AutoCompleteVue2 = {
     },
     tabIndex: {
       type: Number,
-      default: 0
+      default: undefined
     },
     readonly: Boolean,
     accessKey: String,
@@ -594,7 +594,7 @@ var AutoCompleteVue2 = {
           attrs: this.v3 ? undefined : {
             id: searchId,
             placeholder: placeholder,
-            tabIndex: tabIndex || undefined,
+            tabIndex: tabIndex,
             accessKey: this.$props.accessKey,
             value: searchValue,
             suggestedText: this.suggested,
@@ -610,7 +610,7 @@ var AutoCompleteVue2 = {
             ariaLabel: this.$props.ariaLabel
           },
           placeholder: placeholder,
-          tabIndex: tabIndex || undefined,
+          tabIndex: tabIndex,
           accessKey: this.$props.accessKey,
           value: searchValue,
           suggestedText: this.suggested,