@syncfusion/ej2-dropdowns 24.2.9 → 25.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.9
+*  version : 25.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@24.2.8",
+  "_id": "@syncfusion/ej2-dropdowns@18.66.23",
   "_inBundle": false,
-  "_integrity": "sha512-1A5QIAOOlqg4IJjwTgMqNV6xiPutc4FoqN7uskqXelOBGeTgCx4jEpZhh+X9dDCxKXV2iPNOEw2CSFyKTIc2Iw==",
+  "_integrity": "sha512-ATUs2n/OfHPBOZTOz019wmibQIF/WpeSgQUQ8e078Lj1tWx+q7fJmH1wh0/kTbBhsmi1bQLbpxetN60PDoHsxQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,22 +34,22 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.2.8.tgz",
-  "_shasum": "7f4577968b80659bca4fea10937d125be58ad1a3",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.66.23.tgz",
+  "_shasum": "c913d1cfaa53ad097cd8da189c693a8bfdde8d27",
   "_spec": "@syncfusion/ej2-dropdowns@*",
-  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.7",
-    "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.9",
-    "@syncfusion/ej2-lists": "~24.2.8",
-    "@syncfusion/ej2-navigations": "~24.2.8",
-    "@syncfusion/ej2-notifications": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.9"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-data": "~25.1.35",
+    "@syncfusion/ej2-inputs": "~25.1.35",
+    "@syncfusion/ej2-lists": "~25.1.35",
+    "@syncfusion/ej2-navigations": "~25.1.35",
+    "@syncfusion/ej2-notifications": "~25.1.35",
+    "@syncfusion/ej2-popups": "~25.1.35"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "24.2.9",
+  "version": "25.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/auto-complete/auto-complete-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, EventHandler, KeyboardEventArgs, isNullOrUndefined, detach } from '@syncfusion/ej2-base';import { Event, EmitType, Complex } from '@syncfusion/ej2-base';import { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { dropDownListClasses } from '../drop-down-list/drop-down-list';import { ComboBox } from '../combo-box/combo-box';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';import { Search } from '../common/incremental-search';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings, FilteringEventArgs, FilterType, ResultData } from '../drop-down-base/drop-down-base';import { FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
+import { Property, EventHandler, KeyboardEventArgs, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';import { Event, EmitType, Complex } from '@syncfusion/ej2-base';import { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { dropDownListClasses } from '../drop-down-list/drop-down-list';import { ComboBox } from '../combo-box/combo-box';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';import { Search } from '../common/incremental-search';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings, FilteringEventArgs, FilterType, ResultData } from '../drop-down-base/drop-down-base';import { FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
 import {ComboBoxModel} from "../combo-box/combo-box-model";
 
 /**
@@ -135,6 +135,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * Not applicable to this component.
      *
      * @default null
+     * @aspType double
      * @private
 
      */
@@ -190,6 +191,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * Not applicable to this component.
      *
      * @default null
+     * @aspType string
      * @private
 
      */

package/src/auto-complete/auto-complete.d.ts

@@ -142,6 +142,7 @@ export declare class AutoComplete extends ComboBox {
      * Not applicable to this component.
      *
      * @default null
+     * @aspType double
      * @private
 
      */
@@ -192,6 +193,7 @@ export declare class AutoComplete extends ComboBox {
      * Not applicable to this component.
      *
      * @default null
+     * @aspType string
      * @private
 
      */

package/src/auto-complete/auto-complete.js

@@ -19,7 +19,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../combo-box/combo-box-model.d.ts'/>
-import { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
+import { Property, EventHandler, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';
 import { Event, Complex } from '@syncfusion/ej2-base';
 import { removeClass, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { dropDownListClasses } from '../drop-down-list/drop-down-list';
@@ -74,8 +74,9 @@ var AutoComplete = /** @class */ (function (_super) {
     };
     AutoComplete.prototype.getQuery = function (query) {
         var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
-        var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;
-        var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;
+        var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        var filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;
+        var queryString = (this.queryString === '' && !isNullOrUndefined(value)) ? value : this.queryString;
         if (this.isFiltered) {
             return filterQuery;
         }
@@ -101,9 +102,48 @@ var AutoComplete = /** @class */ (function (_super) {
             filterQuery.take(this.suggestionCount);
         }
         if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+            var queryTakeValue = 0;
+            var querySkipValue = 0;
+            if (this.query && this.query.queries.length > 0) {
+                for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
+                    if (this.query.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = this.query.queries[queryElements].e.nos;
+                    }
+                    if (this.query.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ? this.query.queries[queryElements].e.nos : takeValue;
+                    }
+                }
+            }
+            var skipExists = false;
+            var takeExists = false;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        skipExists = true;
+                    }
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        takeExists = true;
+                        filterQuery.queries[queryElements].e.nos = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                    }
+                }
+            }
             var takeValue = this.getTakeValue();
-            filterQuery.skip(this.virtualItemStartIndex);
-            filterQuery.take(takeValue);
+            if (!skipExists) {
+                if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
+                    filterQuery.skip(querySkipValue);
+                }
+                else {
+                    filterQuery.skip(this.virtualItemStartIndex);
+                }
+            }
+            if (!takeExists) {
+                if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
+                    filterQuery.take(queryTakeValue);
+                }
+                else {
+                    filterQuery.take(takeValue);
+                }
+            }
             filterQuery.requiresCount();
         }
         return filterQuery;
@@ -112,6 +152,7 @@ var AutoComplete = /** @class */ (function (_super) {
         var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         this.checkAndResetCache();
         if (isNullOrUndefined(this.list)) {
             _super.prototype.renderList.call(this, e, true);
@@ -305,6 +346,10 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.setInputValue = function (newProp, oldProp) {
         var oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
         var value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (this.allowObjectBinding) {
+            oldValue = !isNullOrUndefined(oldValue) ? getValue((this.fields.value) ? this.fields.value : '', oldValue) : oldValue;
+            value = !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+        }
         if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
             var checkFields_1_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
             var listLength_1 = this.getItems().length;
@@ -313,7 +358,7 @@ var AutoComplete = /** @class */ (function (_super) {
             new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1_1, 'equal', value)))
                 .then(function (e) {
                 if (e.result.length > 0) {
-                    _this_2.value = checkFields_1_1 !== '' ? e.result[0][_this_2.fields.value].toString() : e.result[0].toString();
+                    _this_2.value = checkFields_1_1 !== '' ? _this_2.allowObjectBinding ? e.result[0] : e.result[0][_this_2.fields.value].toString() : e.result[0].toString();
                     _this_2.addItem(e.result, listLength_1);
                     _this_2.updateValues();
                 }

package/src/combo-box/combo-box-model.d.ts

@@ -66,6 +66,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType double
 
      */
     index?: number | null;
@@ -219,6 +220,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * Gets or sets the display text of the selected item in the component.
      *
      * @default null
+     * @aspType string
 
      */
     text?: string | null;
@@ -230,6 +232,13 @@ export interface ComboBoxModel extends DropDownListModel{
      * @isGenericType true
 
      */
-    value?: number | string | boolean | null;
+    value?: number | string | boolean | object | null;
+
+    /**
+    * Defines whether the object binding is allowed or not in the component.
+    *
+    * @default false
+    */
+    allowObjectBinding?: boolean; 
 
 }

package/src/combo-box/combo-box.d.ts

@@ -79,6 +79,7 @@ export declare class ComboBox extends DropDownList {
      * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType double
 
      */
     index: number | null;
@@ -216,6 +217,7 @@ export declare class ComboBox extends DropDownList {
      * Gets or sets the display text of the selected item in the component.
      *
      * @default null
+     * @aspType string
 
      */
     text: string | null;
@@ -226,7 +228,13 @@ export declare class ComboBox extends DropDownList {
      * @isGenericType true
 
      */
-    value: number | string | boolean | null;
+    value: number | string | boolean | object | null;
+    /**
+    * Defines whether the object binding is allowed or not in the component.
+    *
+    * @default false
+    */
+    allowObjectBinding: boolean;
     /**
      * *Constructor for creating the component
      *
@@ -248,7 +256,7 @@ export declare class ComboBox extends DropDownList {
     protected onBlurHandler(e: MouseEvent): void;
     protected targetElement(): HTMLElement | HTMLInputElement;
     protected setOldText(text: string): void;
-    protected setOldValue(value: string | number): void;
+    protected setOldValue(value: string | number | object): void;
     private valueMuteChange;
     protected updateValues(): void;
     protected updateIconState(): void;

package/src/combo-box/combo-box.js

@@ -125,8 +125,12 @@ var ComboBox = /** @class */ (function (_super) {
         this.setHiddenValue();
     };
     ComboBox.prototype.valueMuteChange = function (value) {
+        value = this.allowObjectBinding && !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
         var inputValue = isNullOrUndefined(value) ? null : value.toString();
         Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
+        if (this.allowObjectBinding) {
+            value = this.getDataByValue(value);
+        }
         this.setProperties({ value: value, text: value, index: null }, true);
         this.activeIndex = this.index;
         var fields = this.fields;
@@ -135,35 +139,39 @@ var ComboBox = /** @class */ (function (_super) {
         dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();
         this.itemData = dataItem;
         this.item = null;
-        if (this.previousValue !== this.value) {
+        if ((!this.allowObjectBinding && (this.previousValue !== this.value)) || (this.allowObjectBinding && this.previousValue && this.value && !this.isObjectInArray(this.previousValue, [this.value]))) {
             this.detachChangeEvent(null);
         }
     };
     ComboBox.prototype.updateValues = function () {
         if (!isNullOrUndefined(this.value)) {
-            var li = this.getElementByValue(this.value);
-            var isExistItem = !isNullOrUndefined(li) ? true : false;
+            var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            var li = this.getElementByValue(currentValue);
+            var doesItemExist = !isNullOrUndefined(li) ? true : false;
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
+                var currentValue_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
                 if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
-                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
-                        isExistItem = true;
+                        doesItemExist = true;
                         var dataItem = this.getItemData();
+                        var value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
                         if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
                         }
                     }
                 }
                 else {
-                    var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
-                        isExistItem = true;
+                        doesItemExist = true;
                         var dataItem = this.getItemData();
+                        var value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
                         if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
                         }
                     }
                 }
@@ -171,10 +179,10 @@ var ComboBox = /** @class */ (function (_super) {
             if (li) {
                 this.setSelection(li, null);
             }
-            else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {
+            else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(this.value);
             }
-            else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {
+            else if (!this.enableVirtualization || (this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(null);
             }
         }
@@ -284,7 +292,7 @@ var ComboBox = /** @class */ (function (_super) {
                     this.updateIncrementalView(0, this.itemCount);
                 }
                 activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
-                while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
+                while (isNullOrUndefined(activeItem.item) && this.incrementalEndIndex < this.totalItemCount) {
                     this.incrementalStartIndex = this.incrementalEndIndex;
                     this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
                     this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
@@ -294,6 +302,7 @@ var ComboBox = /** @class */ (function (_super) {
                     }
                     activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
                     if (!isNullOrUndefined(activeItem)) {
+                        activeItem.index = activeItem.index + this.incrementalStartIndex;
                         break;
                     }
                     if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
@@ -379,10 +388,12 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.checkCustomValue = function () {
-        this.itemData = this.getDataByValue(this.value);
+        var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        this.itemData = this.getDataByValue(value);
         var dataItem = this.getItemData();
+        var setValue = this.allowObjectBinding ? this.itemData : dataItem.value;
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
+            this.setProperties({ 'value': setValue }, !this.allowCustom);
         }
     };
     /**
@@ -432,10 +443,10 @@ var ComboBox = /** @class */ (function (_super) {
             var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();
             var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
             if (this.getModuleName() === 'combobox') {
-                if (!this.isSelected && this.previousValue !== currentFillValue) {
+                if (!this.isSelected && ((!this.allowObjectBinding && this.previousValue !== currentFillValue)) || (this.allowObjectBinding && this.previousValue && currentFillValue && !this.isObjectInArray(this.previousValue, [this.getDataByValue(currentFillValue)]))) {
                     this.updateSelectedItem(activeElement, null);
                     this.isSelected = true;
-                    this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
+                    this.previousValue = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(activeElement.getAttribute('data-value'))) : this.getFormattedValue(activeElement.getAttribute('data-value'));
                 }
                 else {
                     this.updateSelectedItem(activeElement, null, true);
@@ -610,11 +621,13 @@ var ComboBox = /** @class */ (function (_super) {
         if (!this.allowCustom && this.inputElement.value !== '') {
             var previousValue = this.previousValue;
             var currentValue = this.value;
+            value = this.allowObjectBinding ? this.getDataByValue(value) : value;
             this.setProperties({ value: value });
             if (isNullOrUndefined(this.value)) {
                 Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
             }
-            if (this.autofill && previousValue === this.value && currentValue !== this.value) {
+            var newValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            if (this.autofill && ((!this.allowObjectBinding && previousValue === this.value) || (this.allowObjectBinding && previousValue && this.isObjectInArray(previousValue, [this.value]))) && ((!this.allowObjectBinding && currentValue !== this.value) || (this.allowObjectBinding && currentValue && !this.isObjectInArray(currentValue, [this.value])))) {
                 this.onChangeEvent(null);
             }
         }
@@ -624,6 +637,7 @@ var ComboBox = /** @class */ (function (_super) {
                 var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;
                 // eslint-disable-next-line max-len
                 var eventArgs = { text: value_1, item: {} };
+                this.isObjectCustomValue = true;
                 if (!this.initial) {
                     this.trigger('customValueSpecifier', eventArgs, function (eventArgs) {
                         _this.updateCustomValueCallback(value_1, eventArgs, previousValue_1, e);
@@ -635,8 +649,9 @@ var ComboBox = /** @class */ (function (_super) {
             }
             else {
                 this.isSelectCustom = false;
+                value = this.allowObjectBinding ? this.getDataByValue(value) : value;
                 this.setProperties({ value: value });
-                if (previousValue_1 !== this.value) {
+                if ((!this.allowObjectBinding && previousValue_1 !== this.value) || (this.allowObjectBinding && previousValue_1 && this.value && !this.isObjectInArray(previousValue_1, [this.value]))) {
                     this.onChangeEvent(e);
                 }
             }
@@ -646,6 +661,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.updateCustomValueCallback = function (value, eventArgs, previousValue, e) {
+        var _this = this;
         var fields = this.fields;
         var item = eventArgs.item;
         var dataItem = {};
@@ -657,16 +673,28 @@ var ComboBox = /** @class */ (function (_super) {
             setValue(fields.value, value, dataItem);
         }
         this.itemData = dataItem;
+        var emptyObject = {};
+        if (this.allowObjectBinding) {
+            var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : Object.keys(this.itemData);
+            if ((!(this.listData && this.listData.length > 0)) && (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'combobox' && this.allowFiltering))) {
+                keys = this.firstItem ? Object.keys(this.firstItem) : Object.keys(this.itemData);
+            }
+            // Create an empty object with predefined keys
+            keys.forEach(function (key) {
+                emptyObject[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, _this.itemData) : null;
+            });
+        }
         var changeData = {
             text: getValue(fields.text, this.itemData),
-            value: getValue(fields.value, this.itemData),
+            value: this.allowObjectBinding ? emptyObject : getValue(fields.value, this.itemData),
             index: null
         };
         this.setProperties(changeData, true);
         this.setSelection(null, null);
         this.isSelectCustom = true;
-        if (previousValue !== this.value) {
-            this.onChangeEvent(e);
+        this.isObjectCustomValue = false;
+        if ((!this.allowObjectBinding && (previousValue !== this.value)) || (this.allowObjectBinding && ((previousValue == null && this.value !== null) || (previousValue && !this.isObjectInArray(previousValue, [this.value]))))) {
+            this.onChangeEvent(e, true);
         }
     };
     /**
@@ -680,7 +708,7 @@ var ComboBox = /** @class */ (function (_super) {
     ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {
         if (this.getModuleName() === 'combobox') {
             this.checkData(newProp);
-            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
+            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp, oldProp);
         }
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -829,7 +857,8 @@ var ComboBox = /** @class */ (function (_super) {
                 this.customValue(e);
             }
         }
-        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {
+        var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== value) {
             this.customValue();
         }
         _super.prototype.hidePopup.call(this, e);
@@ -961,6 +990,9 @@ var ComboBox = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], ComboBox.prototype, "value", void 0);
+    __decorate([
+        Property(false)
+    ], ComboBox.prototype, "allowObjectBinding", void 0);
     ComboBox = __decorate([
         NotifyPropertyChanges
     ], ComboBox);

package/src/common/interface.d.ts

@@ -4,6 +4,7 @@ import { VirtualInfo } from '../common/virtual-scroll';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
 import { GeneratedData } from '../drop-down-list/drop-down-list';
+import { visualMode } from '../multi-select';
 /**
  * Specifies virtual scroll interfaces.
  *
@@ -57,13 +58,44 @@ export interface IDropdownlist extends Component<HTMLElement> {
     listData: {
         [key: string]: Object;
     }[] | string[] | boolean[] | number[];
+    hideSelectedItem: boolean;
+    closePopupOnSelect: boolean;
+    mode: visualMode;
+    isVirtualTrackHeight: boolean;
+    virtualCustomData: {
+        [key: string]: string | Object;
+    };
+    virtualCustomSelectData: {
+        [key: string]: Object;
+    }[] | string[] | number[] | boolean[];
+    allowCustomValue: boolean;
+    enableSelectionOrder: boolean;
+    popupWrapper: HTMLDivElement;
+    currentFocuedListElement: HTMLElement;
+    isScrollChanged: boolean;
+    appendUncheckList: boolean;
+    keyCode: number;
+    preventSetCurrentData: boolean;
+    virtualGroupDataSource: {
+        [key: string]: Object;
+    }[] | DataManager | string[] | number[] | boolean[];
+    updatevirtualizationList(): void;
+    scrollTop(selectedLI: HTMLElement, activeIndex: number, keyCode: number | null): void;
+    renderItems(listData: {
+        [key: string]: Object;
+    }[], fields: FieldSettingsModel, isCheckBoxUpdate?: boolean): HTMLElement;
+    updateVirtualReOrderList(isCheckBoxUpdate?: boolean): void;
+    getForQuery(valuecheck: string[] | number[] | boolean[]): Query;
     skeletonCount: number;
+    getElementByValue(value: string | number | boolean): Element;
     getSkeletonCount(retainSkeleton?: boolean): void;
     getItems(): HTMLElement[];
     getQuery(query: Query): Query;
     getTransformValues(): string;
+    addListFocus(element: HTMLElement): void;
     UpdateSkeleton(): void;
     updateSelectionList(): void;
+    totalItemsCount(): void;
     GetVirtualTrackHeight(): string;
     getPageCount(returnExactCount?: boolean): number;
     handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;

package/src/common/virtual-scroll.d.ts

@@ -48,13 +48,11 @@ export declare class VirtualScroll {
     private setGeneratedData;
     private generateAndExecuteQueryAsync;
     private removeSkipAndTakeEvents;
-    setCurrentViewDataAsync(): void;
+    setCurrentViewDataAsync(component?: object): void;
     private generateQueryAndSetQueryIndexAsync;
     private dataProcessAsync;
     private virtualScrollRefreshAsync;
     scrollListener(scrollArgs: ScrollArg): void;
-    private getPageCount;
-    private getRowHeight;
     private getInfoFromView;
     private sentinelInfo;
     private virtualScrollHandler;