@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-3197

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 20.2.39
-*  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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _dropdowns from '@syncfusion/ej2-dropdowns';
 
 export declare namespace ej {

package/mention.d.ts

@@ -0,0 +1,4 @@
+/**
+ * mention
+ */
+export * from './src/mention/index';

package/mention.js

@@ -0,0 +1,4 @@
+/**
+ * mention
+ */
+export * from './src/mention/index';

package/package.json

@@ -1,77 +1,77 @@
 {
-  "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.2.38",
-  "_inBundle": false,
-  "_integrity": "sha512-esARP7N6ozJ55pHM3IbwOPxXLAUr4JQJ1F41XQ28cikHPb6zwS+zxbQQpRMDLAsGyxjdOKKdQnp9IV14f6vNEA==",
-  "_location": "/@syncfusion/ej2-dropdowns",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-dropdowns@*",
-    "name": "@syncfusion/ej2-dropdowns",
-    "escapedName": "@syncfusion%2fej2-dropdowns",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-dropdowns",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-kanban",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-querybuilder",
-    "/@syncfusion/ej2-react-dropdowns",
-    "/@syncfusion/ej2-schedule",
-    "/@syncfusion/ej2-spreadsheet",
-    "/@syncfusion/ej2-vue-dropdowns"
-  ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.2.38.tgz",
-  "_shasum": "a070ae0bc672b289eb8090a0168168e9fd45decf",
-  "_spec": "@syncfusion/ej2-dropdowns@*",
-  "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
-  "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.38",
-    "@syncfusion/ej2-data": "~20.2.38",
-    "@syncfusion/ej2-inputs": "~20.2.38",
-    "@syncfusion/ej2-lists": "~20.2.39",
-    "@syncfusion/ej2-navigations": "~20.2.39",
-    "@syncfusion/ej2-popups": "~20.2.39"
-  },
-  "deprecated": false,
-  "description": "Essential JS 2 DropDown Components",
-  "devDependencies": {},
-  "es2015": "./dist/es6/ej2-dropdowns.es2015.js",
-  "keywords": [
-    "ej2",
-    "syncfusion",
-    "ej2-dropdown",
-    "dropdownlist",
-    "autocomplete",
-    "multiselect",
-    "combobox",
-    "select",
-    "ej2-dropdownlist",
-    "ej2-autocomplete",
-    "ej2-multiselect",
-    "ej2-combobox"
-  ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-dropdowns.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-dropdowns",
-  "typings": "index.d.ts",
-  "version": "20.2.39",
-  "sideEffects": false
-}
+	"_from": "@syncfusion/ej2-dropdowns@*",
+	"_id": "@syncfusion/ej2-dropdowns@20.2.40",
+	"_inBundle": false,
+	"_integrity": "sha512-o96V/X8YkTkRYueJIqf1gEnZvYhV49BOpHMCUlJhsJ0TnLVFQ64L/1t56deuId3cCKMQR4+O5gE666IWbGkc/A==",
+	"_location": "/@syncfusion/ej2-dropdowns",
+	"_phantomChildren": {},
+	"_requested": {
+	  "type": "range",
+	  "registry": true,
+	  "raw": "@syncfusion/ej2-dropdowns@*",
+	  "name": "@syncfusion/ej2-dropdowns",
+	  "escapedName": "@syncfusion%2fej2-dropdowns",
+	  "scope": "@syncfusion",
+	  "rawSpec": "*",
+	  "saveSpec": null,
+	  "fetchSpec": "*"
+	},
+	"_requiredBy": [
+	  "/",
+	  "/@syncfusion/ej2",
+	  "/@syncfusion/ej2-angular-dropdowns",
+	  "/@syncfusion/ej2-documenteditor",
+	  "/@syncfusion/ej2-gantt",
+	  "/@syncfusion/ej2-grids",
+	  "/@syncfusion/ej2-inplace-editor",
+	  "/@syncfusion/ej2-kanban",
+	  "/@syncfusion/ej2-pdfviewer",
+	  "/@syncfusion/ej2-pivotview",
+	  "/@syncfusion/ej2-querybuilder",
+	  "/@syncfusion/ej2-react-dropdowns",
+	  "/@syncfusion/ej2-schedule",
+	  "/@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",
+	"_spec": "@syncfusion/ej2-dropdowns@*",
+	"_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
+	"author": {
+	  "name": "Syncfusion Inc."
+	},
+	"bundleDependencies": false,
+	"dependencies": {
+	  "@syncfusion/ej2-base": "~20.2.43",
+	  "@syncfusion/ej2-data": "~20.2.43",
+	  "@syncfusion/ej2-inputs": "~20.2.43",
+	  "@syncfusion/ej2-lists": "~20.2.43",
+	  "@syncfusion/ej2-navigations": "~20.2.43",
+	  "@syncfusion/ej2-popups": "~20.2.43"
+	},
+	"deprecated": false,
+	"description": "Essential JS 2 DropDown Components",
+	"devDependencies": {},
+	"es2015": "./dist/es6/ej2-dropdowns.es2015.js",
+	"keywords": [
+	  "ej2",
+	  "syncfusion",
+	  "ej2-dropdown",
+	  "dropdownlist",
+	  "autocomplete",
+	  "multiselect",
+	  "combobox",
+	  "select",
+	  "ej2-dropdownlist",
+	  "ej2-autocomplete",
+	  "ej2-multiselect",
+	  "ej2-combobox"
+	],
+	"license": "SEE LICENSE IN license",
+	"main": "./dist/ej2-dropdowns.umd.min.js",
+	"module": "./index.js",
+	"name": "@syncfusion/ej2-dropdowns",
+	"typings": "index.d.ts",
+	"version": "20.2.43-3197",
+	"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";
 
 /**
@@ -14,10 +14,11 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * * groupBy - Group the list items with it's related items by mapping groupBy field
      *
      * {% codeBlock src='autocomplete/fields/index.md' %}{% endcodeBlock %}
+     *
      * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
      *
      * @default { value: null, iconCss: null, groupBy: null}
-
+     * @deprecated
      */
     fields?: FieldSettingsModel;
 
@@ -27,7 +28,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * By default consider the casing.
      *
      * @default true
-
+     * @deprecated
      */
     ignoreCase?: boolean;
 
@@ -61,7 +62,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * {% codeBlock src='autocomplete/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
-
+     * @deprecated
      */
     htmlAttributes?: { [key: string]: string };
 
@@ -72,7 +73,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * {% codeBlock src='autocomplete/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query?: Query;
 
@@ -135,7 +136,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     index?: number;
 
@@ -153,7 +154,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
      * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
      * @isEnumeration true
-
+     * @deprecated
      */
     floatLabelType?: FloatLabelType;
 
@@ -162,7 +163,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     valueTemplate?: string;
 
@@ -171,7 +172,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     filterBarPlaceholder?: string;
 
@@ -180,7 +181,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      *
      * @default false
      * @private
-
+     * @deprecated
      */
     allowFiltering?: boolean;
 
@@ -189,7 +190,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     text?: string;
 

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

@@ -29,10 +29,11 @@ export declare class AutoComplete extends ComboBox {
      * * groupBy - Group the list items with it's related items by mapping groupBy field
      *
      * {% codeBlock src='autocomplete/fields/index.md' %}{% endcodeBlock %}
+     *
      * > For more details about the field mapping refer to [`Data binding`](../../auto-complete/data-binding) documentation.
      *
      * @default { value: null, iconCss: null, groupBy: null}
-
+     * @deprecated
      */
     fields: FieldSettingsModel;
     /**
@@ -41,7 +42,7 @@ export declare class AutoComplete extends ComboBox {
      * By default consider the casing.
      *
      * @default true
-
+     * @deprecated
      */
     ignoreCase: boolean;
     /**
@@ -71,7 +72,7 @@ export declare class AutoComplete extends ComboBox {
      * {% codeBlock src='autocomplete/htmlAttributes/index.md' %}{% endcodeBlock %}
      *
      * @default {}
-
+     * @deprecated
      */
     htmlAttributes: {
         [key: string]: string;
@@ -83,7 +84,7 @@ export declare class AutoComplete extends ComboBox {
      * {% codeBlock src='autocomplete/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query: Query;
     /**
@@ -142,7 +143,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     index: number;
     /**
@@ -159,7 +160,7 @@ export declare class AutoComplete extends ComboBox {
      * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
      * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
      * @isEnumeration true
-
+     * @deprecated
      */
     floatLabelType: FloatLabelType;
     /**
@@ -167,7 +168,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     valueTemplate: string;
     /**
@@ -175,7 +176,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     filterBarPlaceholder: string;
     /**
@@ -183,7 +184,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default false
      * @private
-
+     * @deprecated
      */
     allowFiltering: boolean;
     /**
@@ -191,7 +192,7 @@ export declare class AutoComplete extends ComboBox {
      *
      * @default null
      * @private
-
+     * @deprecated
      */
     text: string;
     /**
@@ -216,11 +217,11 @@ export declare class AutoComplete extends ComboBox {
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-
+     * @deprecated
      */
     filter(dataSource: {
         [key: string]: Object;
@@ -236,23 +237,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}
-
+     * @deprecated
      */
-    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

@@ -21,14 +21,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference path='../combo-box/combo-box-model.d.ts'/>
 import { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
 import { Event, Complex } from '@syncfusion/ej2-base';
-import { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { removeClass, 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 { 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,38 +125,38 @@ 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);
             }
         });
     };
     /**
      * To filter the data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-
+     * @deprecated
      */
     AutoComplete.prototype.filter = function (dataSource, query, fields) {
         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();
@@ -182,7 +182,9 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.postBackAction = function () {
         if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {
             var items = [this.liCollections[0]];
-            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);
+            var dataSource = this.listData;
+            var type = this.typeOfData(dataSource).typeof;
+            var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);
             this.searchList = false;
             if (!isNullOrUndefined(searchItem.item)) {
                 _super.prototype.setAutoFill.call(this, this.liCollections[0], true);
@@ -191,6 +193,7 @@ var AutoComplete = /** @class */ (function (_super) {
     };
     AutoComplete.prototype.setSelection = function (li, e) {
         if (!this.isValidLI(li)) {
+            this.selectedLI = li;
             return;
         }
         if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'
@@ -206,25 +209,24 @@ var AutoComplete = /** @class */ (function (_super) {
                     e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
                 _super.prototype.setAutoFill.call(this, li, isKeyNavigate);
             }
-            attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
         }
         else {
             _super.prototype.setSelection.call(this, li, e);
         }
     };
     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 +234,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 +245,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 +259,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}
-
+     * @deprecated
      */
-    AutoComplete.prototype.showPopup = function () {
+    AutoComplete.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -274,10 +300,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);
         }
     };
     /**
@@ -308,6 +334,10 @@ var AutoComplete = /** @class */ (function (_super) {
                     if (this.showPopupButton) {
                         var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container, this.createElement);
                         this.inputWrapper.buttons[0] = button;
+                        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+                        if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
+                            this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+                        }
                         if (this.inputWrapper && this.inputWrapper.buttons && this.inputWrapper.buttons[0]) {
                             EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);
                         }