@syncfusion/ej2-dropdowns 20.2.43 → 20.2.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.43
+*  version : 20.2.44
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@20.2.40",
+  "_id": "@syncfusion/ej2-dropdowns@20.2.43",
   "_inBundle": false,
-  "_integrity": "sha512-o96V/X8YkTkRYueJIqf1gEnZvYhV49BOpHMCUlJhsJ0TnLVFQ64L/1t56deuId3cCKMQR4+O5gE666IWbGkc/A==",
+  "_integrity": "sha512-eDYUh1Aox6DSh/TiiHU2bjPmp0O5LR2W86+tL/vVUEI7GbD5ZXzwjcK414jM5Pu3pckoUoXdjqyU1qVoibjBJw==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.2.40.tgz",
-  "_shasum": "3aa3da1c5dfa9c4d69ccf17ab3ef82d0adc3a673",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.2.43.tgz",
+  "_shasum": "de78f32afa49d61a4cc323357712c7cc81c46eb2",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -44,9 +44,9 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~20.2.43",
     "@syncfusion/ej2-data": "~20.2.43",
-    "@syncfusion/ej2-inputs": "~20.2.43",
+    "@syncfusion/ej2-inputs": "~20.2.44",
     "@syncfusion/ej2-lists": "~20.2.43",
-    "@syncfusion/ej2-navigations": "~20.2.43",
+    "@syncfusion/ej2-navigations": "~20.2.44",
     "@syncfusion/ej2-popups": "~20.2.43"
   },
   "deprecated": false,
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.2.43",
+  "version": "20.2.44",
   "sideEffects": false
 }

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 } from '../drop-down-base/drop-down-base';import { FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { DataManager, Query } from '@syncfusion/ej2-data';
+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 {ComboBoxModel} from "../combo-box/combo-box-model";
 
 /**

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

@@ -236,23 +236,24 @@ export declare class AutoComplete extends ComboBox {
         [key: string]: Object;
     }[], fieldsSettings: FieldSettingsModel): FieldSettingsModel;
     protected isFiltering(): boolean;
-    protected renderPopup(): void;
+    protected renderPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     protected isEditTextBox(): boolean;
     protected isPopupButton(): boolean;
     protected isSelectFocusItem(element: Element): boolean;
+    protected setInputValue(newProp?: any, oldProp?: any): void;
     /**
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
 
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Hides the popup if it is in open state.
      *
      * @returns {void}
      */
-    hidePopup(e?: KeyboardEventArgs): void;
+    hidePopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Dynamically change the value of properties.
      *

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

@@ -28,7 +28,7 @@ import { highlightSearch, revertHighlightSearch } from '../common/highlight-sear
 import { Search } from '../common/incremental-search';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
 import { Input } from '@syncfusion/ej2-inputs';
-import { DataManager, Query } from '@syncfusion/ej2-data';
+import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
 dropDownListClasses.root = 'e-autocomplete';
 dropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';
 /**
@@ -52,10 +52,10 @@ var AutoComplete = /** @class */ (function (_super) {
      * @private
      */
     function AutoComplete(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.isFiltered = false;
-        _this.searchList = false;
-        return _this;
+        var _this_1 = _super.call(this, options, element) || this;
+        _this_1.isFiltered = false;
+        _this_1.searchList = false;
+        return _this_1;
     }
     /**
      * Initialize the event handler
@@ -103,17 +103,17 @@ var AutoComplete = /** @class */ (function (_super) {
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
-        var _this = this;
+        var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
         if (isNullOrUndefined(this.list)) {
-            _super.prototype.renderList.call(this, true);
+            _super.prototype.renderList.call(this, e, true);
         }
         this.queryString = this.filterInput.value;
         if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
             this.queryString = this.queryString === '' ? null : this.queryString;
             this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
             return;
         }
         this.isSelected = false;
@@ -125,15 +125,15 @@ var AutoComplete = /** @class */ (function (_super) {
                 if (eventArgs.cancel) {
                     return;
                 }
-                _this.isFiltered = true;
-                _this.filterAction(dataSource, query, fields);
+                _this_1.isFiltered = true;
+                _this_1.filterAction(dataSource, query, fields);
             },
             cancel: false
         };
         this.trigger('filtering', eventArgs, function (eventArgs) {
-            if (!eventArgs.cancel && !_this.isFiltered && !eventArgs.preventDefaultAction) {
-                _this.searchList = true;
-                _this.filterAction(_this.dataSource, null, _this.fields);
+            if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {
+                _this_1.searchList = true;
+                _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);
             }
         });
     };
@@ -150,13 +150,13 @@ var AutoComplete = /** @class */ (function (_super) {
         this.isFiltered = true;
         this.filterAction(dataSource, query, fields);
     };
-    AutoComplete.prototype.filterAction = function (dataSource, query, fields) {
+    AutoComplete.prototype.filterAction = function (dataSource, query, fields, e) {
         this.beforePopupOpen = true;
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
-            this.resetList(dataSource, fields, query);
+            this.resetList(dataSource, fields, query, e);
         }
         else {
-            this.hidePopup();
+            this.hidePopup(e);
             this.beforePopupOpen = false;
         }
         this.renderReactTemplates();
@@ -213,18 +213,18 @@ var AutoComplete = /** @class */ (function (_super) {
         }
     };
     AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {
-        var _this = this;
+        var _this_1 = this;
         var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);
         if (isNullOrUndefined(fields.itemCreated)) {
             fields.itemCreated = function (e) {
-                if (_this.highlight) {
-                    if (_this.element.tagName === _this.getNgDirective() && _this.itemTemplate) {
+                if (_this_1.highlight) {
+                    if (_this_1.element.tagName === _this_1.getNgDirective() && _this_1.itemTemplate) {
                         setTimeout(function () {
-                            highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
+                            highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                         }, 0);
                     }
                     else {
-                        highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
+                        highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                     }
                 }
             };
@@ -232,10 +232,10 @@ var AutoComplete = /** @class */ (function (_super) {
         else {
             var itemCreated_1 = fields.itemCreated;
             fields.itemCreated = function (e) {
-                if (_this.highlight) {
-                    highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
+                if (_this_1.highlight) {
+                    highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                 }
-                itemCreated_1.apply(_this, [e]);
+                itemCreated_1.apply(_this_1, [e]);
             };
         }
         return fields;
@@ -243,9 +243,9 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.isFiltering = function () {
         return true;
     };
-    AutoComplete.prototype.renderPopup = function () {
+    AutoComplete.prototype.renderPopup = function (e) {
         this.list.scrollTop = 0;
-        _super.prototype.renderPopup.call(this);
+        _super.prototype.renderPopup.call(this, e);
     };
     AutoComplete.prototype.isEditTextBox = function () {
         return true && this.inputElement.value.trim() !== '';
@@ -257,13 +257,37 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.isSelectFocusItem = function (element) {
         return false;
     };
+    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 (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;
+            var query = new Query();
+            var _this_2 = this;
+            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.addItem(e.result, listLength_1);
+                    _this_2.updateValues();
+                }
+                else {
+                    newProp && newProp.text ? _this_2.setOldText(oldValue) : newProp && newProp.value ? _this_2.setOldValue(oldValue) : _this_2.updateValues();
+                }
+            });
+        }
+        else if (newProp) {
+            newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);
+        }
+    };
     /**
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
 
      */
-    AutoComplete.prototype.showPopup = function () {
+    AutoComplete.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -274,10 +298,10 @@ var AutoComplete = /** @class */ (function (_super) {
         this.beforePopupOpen = true;
         this.preventAutoFill = true;
         if (isNullOrUndefined(this.list)) {
-            this.renderList();
+            this.renderList(e);
         }
         else {
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
         }
     };
     /**

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

@@ -346,14 +346,14 @@ export declare class ComboBox extends DropDownList {
      * @returns {void}
 
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Hides the popup if it is in open state.
      *
      * @returns {void}
 
      */
-    hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
+    hidePopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Sets the focus to the component for interaction.
      *

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

@@ -400,7 +400,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.incrementalSearch = function (e) {
-        this.showPopup();
+        this.showPopup(e);
         if (!isNullOrUndefined(this.listData)) {
             this.inlineSearch(e);
             e.preventDefault();
@@ -663,8 +663,8 @@ var ComboBox = /** @class */ (function (_super) {
      * @returns {void}
 
      */
-    ComboBox.prototype.showPopup = function () {
-        _super.prototype.showPopup.call(this);
+    ComboBox.prototype.showPopup = function (e) {
+        _super.prototype.showPopup.call(this, e);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**

package/src/drop-down-base/drop-down-base.d.ts

@@ -592,7 +592,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      */
     protected resetList(dataSource?: {
         [key: string]: Object;
-    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query): void;
+    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     protected updateSelectElementData(isFiltering: boolean): void;
     protected updateSelection(): void;
     protected renderList(): void;
@@ -616,7 +616,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @private
      * @returns {void}
      */
-    render(isEmptyData?: boolean): void;
+    render(e?: MouseEvent | KeyboardEventArgs | TouchEvent, isEmptyData?: boolean): void;
     /**
      * Return the module name of this component.
      *
@@ -723,7 +723,7 @@ export interface PopupEventArgs {
     /**
      * Specifies the event.
      */
-    event?: MouseEvent | KeyboardEventArgs;
+    event?: MouseEvent | KeyboardEventArgs | TouchEvent | Object;
 }
 export interface FocusEventArgs {
     /**

package/src/drop-down-base/drop-down-base.js

@@ -314,7 +314,7 @@ var DropDownBase = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownBase.prototype.initialize = function () {
+    DropDownBase.prototype.initialize = function (e) {
         this.bindEvent = true;
         this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;
         if (this.element.tagName === 'UL') {
@@ -333,7 +333,7 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
         else {
-            this.setListData(this.dataSource, this.fields, this.query);
+            this.setListData(this.dataSource, this.fields, this.query, e);
         }
     };
     /**
@@ -441,7 +441,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    DropDownBase.prototype.setListData = function (dataSource, fields, query) {
+    DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
         var _this = this;
         fields = fields ? fields : this.fields;
         var ulElement;
@@ -488,7 +488,7 @@ var DropDownBase = /** @class */ (function (_super) {
                     _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
                         if (!localDataArgs.cancel) {
                             ulElement = _this.renderItems(localDataArgs.result, fields);
-                            _this.onActionComplete(ulElement, localDataArgs.result);
+                            _this.onActionComplete(ulElement, localDataArgs.result, event);
                             if (_this.groupTemplate) {
                                 _this.renderGroupTemplate(ulElement);
                             }
@@ -878,7 +878,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    DropDownBase.prototype.resetList = function (dataSource, fields, query) {
+    DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -889,7 +889,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 }
             }
             dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length ? this.selectData : dataSource;
-            this.setListData(dataSource, fields, query);
+            this.setListData(dataSource, fields, query, e);
         }
     };
     DropDownBase.prototype.updateSelectElementData = function (isFiltering) {
@@ -981,7 +981,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @private
      * @returns {void}
      */
-    DropDownBase.prototype.render = function (isEmptyData) {
+    DropDownBase.prototype.render = function (e, isEmptyData) {
         this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
@@ -1005,7 +1005,7 @@ var DropDownBase = /** @class */ (function (_super) {
         this.setEnableRtl();
         this.setEnabled();
         if (!isEmptyData) {
-            this.initialize();
+            this.initialize(e);
         }
     };
     /**

package/src/drop-down-list/drop-down-list.d.ts

@@ -327,11 +327,11 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected preRender(): void;
     private initializeData;
     protected setZIndex(): void;
-    protected renderList(isEmptyData?: boolean): void;
+    protected renderList(e?: MouseEvent | KeyboardEventArgs | TouchEvent, isEmptyData?: boolean): void;
     private floatLabelChange;
     protected resetHandler(e: MouseEvent): void;
     protected resetFocusElement(): void;
-    protected clearAll(e?: MouseEvent | KeyboardEventArgs, properties?: DropDownListModel): void;
+    protected clearAll(e?: MouseEvent | KeyboardEventArgs | TouchEvent, properties?: DropDownListModel): void;
     private resetSelection;
     private setHTMLAttributes;
     protected getAriaAttributes(): {
@@ -478,7 +478,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private focusIndexItem;
     protected updateSelection(): void;
     protected removeFocus(): void;
-    protected renderPopup(): void;
+    protected renderPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent | Object): void;
     private checkCollision;
     private getOffsetValue;
     private createPopup;
@@ -529,6 +529,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private checkValidLi;
     private setSelectionData;
     protected setReadOnly(): void;
+    protected setInputValue(newProp?: any, oldProp?: any): void;
     private setCssClass;
     /**
      * Return the module name of this component.
@@ -542,7 +543,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      *
      * @returns {void}
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     private invokeRenderPopup;
     protected renderHightSearch(): void;
     /**
@@ -550,7 +551,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      *
      * @returns {void}
      */
-    hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
+    hidePopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Sets the focus on the component for interaction.
      *

package/src/drop-down-list/drop-down-list.js

@@ -150,8 +150,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
-    DropDownList.prototype.renderList = function (isEmptyData) {
-        _super.prototype.render.call(this, isEmptyData);
+    DropDownList.prototype.renderList = function (e, isEmptyData) {
+        _super.prototype.render.call(this, e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -636,7 +636,7 @@ var DropDownList = /** @class */ (function (_super) {
             var isTabAction = e.action === 'tab' || e.action === 'close';
             if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList();
+                this.renderList(e);
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -675,7 +675,7 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -867,7 +867,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -877,7 +877,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.floatLabelChange();
                 this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
                 this.isDropDownClick = true;
-                this.showPopup();
+                this.showPopup(e);
             }
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_1 = this;
@@ -1522,26 +1522,8 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 this.initial = false;
             }
-            else if (this.getModuleName() === 'autocomplete' && this.value && this.typedString === '' && !(this.dataSource instanceof DataManager)) {
-                var checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
-                var checkValue = list.some(function (x) { return x[checkFields_1] === _this.value; });
-                var query = new Query();
-                if (!checkValue) {
-                    new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', this.value)))
-                        .then(function (e) {
-                        if (e.result.length > 0) {
-                            _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
-                            _this.addItem(e.result, list.length);
-                            _this.updateValues();
-                        }
-                        else {
-                            _this.updateValues();
-                        }
-                    });
-                }
-                else {
-                    this.updateValues();
-                }
+            else if (this.getModuleName() === 'autocomplete' && this.value) {
+                this.setInputValue();
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -1564,7 +1546,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     };
@@ -1636,7 +1618,7 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
-    DropDownList.prototype.renderPopup = function () {
+    DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -1739,7 +1721,7 @@ var DropDownList = /** @class */ (function (_super) {
                 var animModel = { name: 'FadeIn', duration: 100 };
                 _this.beforePopupOpen = true;
                 var popupInstance = _this.popupObj;
-                var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
                         addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
@@ -2152,7 +2134,12 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -2344,6 +2331,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldText(oldProp.text);
                             }
@@ -2385,6 +2375,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldValue(oldProp.value);
                             }
@@ -2503,6 +2496,8 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    DropDownList.prototype.setInputValue = function (newProp, oldProp) {
+    };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -2529,7 +2524,7 @@ var DropDownList = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownList.prototype.showPopup = function () {
+    DropDownList.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -2549,11 +2544,11 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
-            this.renderList();
+            this.renderList(e);
         }
-        this.invokeRenderPopup();
+        this.invokeRenderPopup(e);
     };
-    DropDownList.prototype.invokeRenderPopup = function () {
+    DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_2 = this;
@@ -2563,7 +2558,7 @@ var DropDownList = /** @class */ (function (_super) {
             history.pushState({}, '');
         }
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
-            this.renderPopup();
+            this.renderPopup(e);
         }
         attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
     };

package/src/multi-select/multi-select.d.ts

@@ -823,7 +823,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      *
      * @returns {void}
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Based on the state parameter, entire list item will be selected/deselected.
      * parameter