@syncfusion/ej2-dropdowns 18.1.57 → 18.2.44-4569

package/dist/es6/ej2-dropdowns.es5.js

@@ -13,6 +13,7 @@ var queryString = '';
 var prevString = '';
 var matches$1 = [];
 var activeClass = 'e-active';
+var prevElementId = '';
 /**
  * Search and focus the list item based on key code matches with list text content
  * @param  { number } keyCode - Specifies the key code which pressed on keyboard events.
@@ -21,12 +22,12 @@ var activeClass = 'e-active';
  * after selected item otherwise it will do from initial.
  * @param  { boolean } ignoreCase - Specifies the case consideration when search has done.
  */
-function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, isBlazor$$1) {
+function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, isBlazor$$1) {
     queryString += String.fromCharCode(keyCode);
     setTimeout(function () { queryString = ''; }, 1000);
     var index;
     queryString = ignoreCase ? queryString.toLowerCase() : queryString;
-    if (prevString === queryString) {
+    if (prevElementId === elementId && prevString === queryString) {
         for (var i = 0; i < matches$1.length; i++) {
             if (matches$1[i].classList.contains(activeClass)) {
                 index = i;
@@ -62,6 +63,7 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, isBlazor$$
             i++;
         } while (i !== selectedIndex);
         prevString = queryString;
+        prevElementId = elementId;
         return matches$1[0];
     }
 }
@@ -138,25 +140,25 @@ function revertHighlightSearch(content) {
  * Common source
  */
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var FieldSettings = /** @__PURE__ @class */ (function (_super) {
     __extends(FieldSettings, _super);
     function FieldSettings() {
@@ -1336,25 +1338,25 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 /* tslint:disable */
 // don't use space in classnames 
@@ -1915,7 +1917,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     
     DropDownList.prototype.removeHover = function () {
         if (this.list) {
-            var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
+            var hoveredItem = (this.isServerBlazor && this.popupObj && this.popupObj.element) ?
+                this.popupObj.element.querySelectorAll('.' + dropDownBaseClasses.hover) :
+                this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
             if (hoveredItem && hoveredItem.length) {
                 removeClass(hoveredItem, dropDownBaseClasses.hover);
             }
@@ -1928,7 +1932,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     
     DropDownList.prototype.incrementalSearch = function (e) {
         if (this.liCollections.length > 0) {
-            var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.isServerBlazor);
+            var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id, this.isServerBlazor);
             if (!isNullOrUndefined(li)) {
                 this.setSelection(li, e);
                 this.setScrollPosition();
@@ -3100,7 +3104,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.updateServerPopup = function (popupEle) {
         if (this.isServerBlazor) {
             if (popupEle && popupEle.querySelector('li')) {
-                removeClass([this.list], ['e-nodata']);
+                removeClass([popupEle.querySelector('.e-content')], ['e-nodata']);
             }
             this.initial = false;
             popupEle.removeAttribute('style');
@@ -3129,7 +3133,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 _this.isDocumentClick = false;
                 _this.destroyPopup();
                 var formElement = closest(_this.inputElement, 'form');
-                if (_this.isFiltering() && formElement && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
+                if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
                     _this.isActive = true;
                     _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
                 }
@@ -3587,6 +3591,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.getModuleName() !== 'autocomplete' && this.allowFiltering && (isChangeValue || isChangeText)) {
             this.itemData = null;
         }
+        if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {
+            this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };
+        }
     };
     DropDownList.prototype.updateDataSource = function (props) {
         if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
@@ -3674,7 +3681,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.text, oldProp.text, 'text');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.setOldText(oldProp.text);
                             }
                         }
@@ -3700,7 +3707,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.value, oldProp.value, 'value');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.setOldValue(oldProp.value);
                             }
                         }
@@ -3718,14 +3725,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
+                    if (!this.initRemoteRender && this.liCollections) {
                         var element = this.liCollections[newProp.index];
                         if (!this.checkValidLi(element)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.index, oldProp.index, 'index');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.index = oldProp.index;
                             }
                         }
@@ -3849,7 +3856,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!this.isServerBlazor) {
             this.invokeRenderPopup();
         }
-        if (this.isServerBlazor && !isNullOrUndefined(this.list) && (this.getModuleName() === 'dropdownlist' || !this.isFiltering())) {
+        var popupHolderEle = !this.isFiltering() || document.querySelector('#' + this.element.id + '_popup_holder');
+        var isDropdownComp = this.getModuleName() === 'dropdownlist' || !this.isFiltering();
+        if (this.isServerBlazor && popupHolderEle && !isNullOrUndefined(this.list) && isDropdownComp) {
             this.invokeRenderPopup();
         }
     };
@@ -3920,6 +3929,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.updateclientItemData = function (data) {
         this.listData = data;
     };
+    DropDownList.prototype.initValueItemData = function (selectData) {
+        this.itemData = selectData;
+        this.previousValue = this.value;
+        this.initial = false;
+    };
     DropDownList.prototype.serverUpdateListElement = function (data, popupEle) {
         this.listData = data;
         if (this.ulElement) {
@@ -3953,8 +3967,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         this.closePopup();
         var dataItem = this.getItemData();
+        var isSelectVal = this.isServerBlazor ? !isNullOrUndefined(this.value) : !isNullOrUndefined(this.selectedLI);
         if (this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
-            !isNullOrUndefined(this.selectedLI) && this.inputElement.value !== dataItem.text)) {
+            isSelectVal && this.inputElement.value !== dataItem.text)) {
             this.isSelectCustom = false;
             this.clearAll(e);
         }
@@ -4155,25 +4170,25 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var RTL = 'e-rtl';
 var DROPDOWNTREE = 'e-ddt';
 var HIDDENELEMENT = 'e-ddt-hidden';
@@ -5388,6 +5403,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                     _this.changeState(wrap, 'check');
                     _this.checkSelectAll = false;
                 }
+                if (_this.allowFiltering) {
+                    removeClass([_this.inputWrapper], [INPUTFOCUS]);
+                    _this.filterObj.element.focus();
+                }
                 var eventArgs = { popup: _this.popupObj };
                 _this.trigger('open', eventArgs);
             }
@@ -5488,18 +5507,17 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         var target = e.target;
         var isTree = closest(target, '.' + PARENTITEM);
         var isFilter = closest(target, '.' + FILTERWRAP);
-        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isFilter)) ||
+        var isScroller = target.classList.contains(DROPDOWN) ? true :
+            (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
+        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isFilter || isScroller)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {
             this.isDocumentClick = false;
+            e.preventDefault();
         }
-        else if (!this.inputWrapper.contains(target)) {
-            var isScroller = target.classList.contains(DROPDOWN) ? true :
-                (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
-            if (!isScroller && this.inputFocus) {
-                this.focusOut(e);
-            }
+        else if (!this.inputWrapper.contains(target) && this.inputFocus) {
+            this.focusOut(e);
         }
     };
     DropDownTree.prototype.onActionFailure = function (e) {
@@ -6593,6 +6611,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.popupObj.hide();
             if (this.inputFocus) {
                 this.inputWrapper.focus();
+                if (this.allowFiltering) {
+                    addClass([this.inputWrapper], [INPUTFOCUS]);
+                }
             }
             this.trigger('close', eventArgs);
         }
@@ -6779,25 +6800,25 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-var __extends$3 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$3 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /// <reference path='../drop-down-list/drop-down-list-model.d.ts'/>
 /* tslint:disable */
 /* tslint:enable */
@@ -7594,25 +7615,25 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-var __extends$4 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$4 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /// <reference path='../combo-box/combo-box-model.d.ts'/>
 /* tslint:disable */
 /* tslint:enable */
@@ -8131,25 +8152,25 @@ function floatLabelBlur(overAllWrapper, componentWrapper, value, floatLabelType,
     }
 }
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$5 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 /* tslint:disable */
 /* tslint:enable */
@@ -8534,6 +8555,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         else {
             this.updateActionList(ulElement, list, e);
         }
+        if (isBlazor() && this.isServerRendered && this.allowFiltering && this.mode === 'CheckBox') {
+            this.removeFocus();
+        }
         if (isBlazor() && this.isServerRendered && this.isDynamicDataChange && this.value && this.value.length > 0) {
             this.updateVal(this.value, null, 'value');
             this.addValidInputClass();
@@ -8549,7 +8573,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.mainData = list;
             this.mainListCollection = this.liCollections;
         }
-        else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
+        else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
             this.mainData = list;
         }
         if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering) {
@@ -8893,8 +8917,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (this.mode !== 'CheckBox') {
                 this.inputElement.focus();
             }
+            else if ((this.floatLabelType === 'Auto' &&
+                ((this.overAllWrapper.classList.contains('e-outline')) || (this.overAllWrapper.classList.contains('e-filled'))))) {
+                addClass([this.overAllWrapper], 'e-valid-input');
+            }
             return;
         }
+        if (this.floatLabelType === 'Auto' && (this.overAllWrapper.classList.contains('e-outline')) && this.mode === 'CheckBox' &&
+            ((isNullOrUndefined(this.value)) || this.value.length === 0)) {
+            removeClass([this.overAllWrapper], 'e-valid-input');
+        }
         if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve) && !isDocClickFromCheck) {
             this.inputFocus = false;
             this.overAllWrapper.classList.remove(FOCUS);
@@ -8945,6 +8977,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);
             this.setPlaceholderSize(downIconWidth);
         }
+        else {
+            if (!isNullOrUndefined(this.dropIcon)) {
+                this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);
+            }
+        }
     };
     MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
@@ -10062,16 +10099,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                                     if (_this.itemTemplate && (isBlazor() && _this.isServerRendered)) {
                                         setTimeout(function () { _this.mainList = _this.ulElement; }, 0);
                                     }
-                                    else {
-                                        if (!(_this.mode !== 'CheckBox' && _this.allowFiltering && _this.targetElement().trim() !== '')) {
-                                            _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
-                                        }
+                                    else if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                                        _this.targetElement().trim() !== '')) {
+                                        _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
                                     }
                                 }
                                 _this.isFirstClick = true;
                             }
                             _this.popupObj.wireScrollEvents();
-                            if (!(_this.mode !== 'CheckBox' && _this.allowFiltering && _this.targetElement().trim() !== '')) {
+                            if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                                _this.targetElement().trim() !== '')) {
                                 _this.loadTemplate();
                             }
                             _this.setScrollPosition();
@@ -10465,7 +10502,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.updateActionCompleteData = function (li, item) {
         if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
             this.mainList = this.ulElement;
-            addClass([li], HIDE_LIST);
+            if (this.hideSelectedItem) {
+                addClass([li], HIDE_LIST);
+            }
         }
     };
     MultiSelect.prototype.updateAddItemList = function (list, itemCount) {
@@ -10983,7 +11022,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                             var textArr = this.viewWrapper.innerHTML.split(this.delimiterChar);
                             textArr.pop();
                             this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);
-                            remaining++;
+                            if (this.viewWrapper.innerHTML === '') {
+                                remaining++;
+                            }
                             wrapperleng = this.viewWrapper.offsetWidth;
                         }
                         break;
@@ -11099,7 +11140,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
             'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
         if (this.value && this.value.length && this.isPopupOpen() && event && event.target
-            && closest(event.target, '.e-close-hooker')) {
+            && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
                 'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
                 'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
@@ -11392,28 +11433,63 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.renderPopup();
     };
+    MultiSelect.prototype.presentItemValue = function (ulElement) {
+        var valuecheck = [];
+        for (var i = 0; i < this.value.length; i++) {
+            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            if (!checkEle) {
+                valuecheck.push(this.value[i]);
+            }
+        }
+        return valuecheck;
+    };
+    
+    MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
+        var _this = this;
+        this.showSpinner();
+        this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
+            _this.hideSpinner();
+            _this.addItem(e.result, list.length);
+            _this.updateActionList(ulElement, list, event);
+        });
+    };
+    
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
         }
-        else if (!this.inputFocus) {
-            if (prop === 'text') {
-                this.initialTextUpdate();
-                newProp = this.value;
-            }
-            if (isNullOrUndefined(this.value) || this.value.length === 0) {
-                this.tempValues = oldProp;
+        else {
+            var valuecheck = [];
+            if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+                valuecheck = this.presentItemValue(this.ulElement);
             }
-            this.initialValueUpdate();
-            if (this.mode !== 'Box') {
-                this.updateDelimView();
+            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+                && this.listData != null) {
+                this.mainData = null;
+                this.setDynValue = true;
+                this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             }
-            this.refreshInputHight();
-            this.refreshPlaceHolder();
-            if (this.mode !== 'CheckBox' && this.changeOnBlur) {
-                this.updateValueState(null, newProp, oldProp);
+            else {
+                if (prop === 'text') {
+                    this.initialTextUpdate();
+                    newProp = this.value;
+                }
+                if (isNullOrUndefined(this.value) || this.value.length === 0) {
+                    this.tempValues = oldProp;
+                }
+                this.initialValueUpdate();
+                if (this.mode !== 'Box' && !this.inputFocus) {
+                    this.updateDelimView();
+                }
+                if (!this.inputFocus) {
+                    this.refreshInputHight();
+                }
+                this.refreshPlaceHolder();
+                if (this.mode !== 'CheckBox' && this.changeOnBlur) {
+                    this.updateValueState(null, newProp, oldProp);
+                }
+                this.checkPlaceholderSize();
             }
-            this.checkPlaceholderSize();
         }
         if (!this.changeOnBlur) {
             this.updateValueState(null, newProp, oldProp);
@@ -12444,25 +12520,25 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
  * export all modules from current location
  */
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$6 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 var ITEMTEMPLATE_PROPERTY$1 = 'ItemTemplate';
 /**
@@ -12531,6 +12607,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     function ListBox(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.isValidKey = false;
+        _this.keyDownStatus = false;
         return _this;
     }
     ListBox_1 = ListBox;
@@ -12576,12 +12653,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     };
     ListBox.prototype.updateBlazorListData = function (data, isDataSource) {
         if (isDataSource) {
+            this.liCollections = this.list.querySelectorAll('.' + cssClass.li);
             this.mainList = this.ulElement = this.list.querySelector('ul');
         }
-        else {
+        if (!isNullOrUndefined(data)) {
             this.sortedData = this.jsonData = this.listData = data;
         }
-        this.initDraggable();
     };
     ListBox.prototype.initWrapper = function () {
         var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
@@ -12626,9 +12703,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     };
     ListBox.prototype.initDraggable = function () {
         var _this = this;
-        if (this.ulElement) {
-            this.ulElement.id = this.element.id + '_parent';
-        }
         if (this.allowDragAndDrop) {
             new Sortable(this.ulElement, {
                 scope: this.scope,
@@ -12765,7 +12839,13 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ListBox.prototype.onInput = function () {
-        this.isValidKey = true;
+        if (this.keyDownStatus) {
+            this.isValidKey = true;
+        }
+        else {
+            this.isValidKey = false;
+        }
+        this.keyDownStatus = false;
         this.refreshClearIcon();
     };
     ListBox.prototype.clearText = function () {
@@ -12783,21 +12863,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     };
     ListBox.prototype.onActionComplete = function (ulElement, list, e) {
         var searchEle;
-        if (this.allowFiltering && this.list.getElementsByClassName('e-filter-parent')[0]) {
-            if (isBlazor() && this.isServerRendered) {
-                searchEle = this.list.getElementsByClassName('e-filter-parent')[0];
-            }
-            else {
-                searchEle = this.list.getElementsByClassName('e-filter-parent')[0].cloneNode(true);
-            }
+        if (this.allowFiltering) {
+            searchEle = this.list.getElementsByClassName('e-filter-parent')[0];
         }
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
         if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
             this.list.insertBefore(searchEle, this.list.firstElementChild);
-            if (!isBlazor() && !this.isServerRendered) {
-                this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
-                this.filterWireEvents(searchEle);
-            }
         }
         this.initWrapper();
         this.setSelection();
@@ -12817,11 +12888,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             if (this.allowFiltering) {
-                var filterElem = this.list.getElementsByClassName('e-input-filter')[0];
-                var txtLength = this.filterInput.value.length;
-                filterElem.selectionStart = txtLength;
-                filterElem.selectionEnd = txtLength;
-                filterElem.focus();
+                this.list.getElementsByClassName('e-input-filter')[0].focus();
             }
         }
         this.initLoad = false;
@@ -13135,6 +13202,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             var dupData = [];
             var itemIdx = void 0;
             extend(dupData, [], this.listData);
+            var removeIdxes = [];
+            var removeLiIdxes = [];
             for (var j = 0; j < items.length; j++) {
                 if (items[j] instanceof Object) {
                     dataValue = getValue(fields.value, items[j]);
@@ -13152,11 +13221,17 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     if (objValue === dataValue) {
                         itemIdx = this.getIndexByValue(dataValue);
                         liCollections.push(liElement[itemIdx]);
-                        this.listData.splice(i, 1);
-                        this.updateLiCollection(itemIdx);
+                        removeIdxes.push(i);
+                        removeLiIdxes.push(itemIdx);
                     }
                 }
             }
+            for (var k = removeIdxes.length - 1; k > 0; k--) {
+                this.listData.splice(removeIdxes[k], 1);
+            }
+            for (var k = removeLiIdxes.length - 1; k > 0; k--) {
+                this.liCollections.splice(removeLiIdxes[k], 1);
+            }
         }
         else {
             itemIndex = itemIndex ? itemIndex : 0;
@@ -13167,6 +13242,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         for (var i = 0; i < liCollections.length; i++) {
             this.ulElement.removeChild(liCollections[i]);
         }
+        if (this.listData.length === 0) {
+            this.l10nUpdate();
+        }
     };
     /**
      * Gets the array of data Object that matches the given array of values.
@@ -13371,7 +13449,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.list, 'click', this.clickHandler);
         EventHandler.remove(wrapper, 'keydown', this.keyDownHandler);
         EventHandler.remove(wrapper, 'focusout', this.focusOutHandler);
-        if (this.allowFiltering && this.clearFilterIconElem) {
+        if (this.allowFiltering) {
             EventHandler.remove(this.clearFilterIconElem, 'click', this.clearText);
         }
         if (this.toolbarSettings.items.length) {
@@ -13433,6 +13511,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     className: listBoxClasses.filterInput
                 });
                 this.element.parentNode.insertBefore(this.filterInput, this.element);
+                if (Browser.isDevice) {
+                    
+                }
                 filterInputObj = Input.createInput({
                     element: this.filterInput,
                     buttons: [listBoxClasses.filterBarClearIcon],
@@ -13455,24 +13536,16 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                 addClass([this.list], 'e-filter-list');
             }
             this.inputString = this.filterInput.value;
-            this.filterWireEvents();
-            return filterInputObj;
-        }
-    };
-    ListBox.prototype.filterWireEvents = function (filterElem) {
-        if (filterElem) {
-            this.filterInput = filterElem.querySelector('.e-input-filter');
-        }
-        this.clearFilterIconElem = this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);
-        if (this.clearFilterIconElem) {
-            EventHandler.add(this.clearFilterIconElem, 'click', this.clearText, this);
-            if (!filterElem) {
+            this.clearFilterIconElem = this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);
+            if (this.clearFilterIconElem) {
+                EventHandler.add(this.clearFilterIconElem, 'click', this.clearText, this);
                 this.clearFilterIconElem.style.visibility = 'hidden';
             }
+            EventHandler.add(this.filterInput, 'input', this.onInput, this);
+            EventHandler.add(this.filterInput, 'keyup', this.KeyUp, this);
+            EventHandler.add(this.filterInput, 'keydown', this.onKeyDown, this);
+            return filterInputObj;
         }
-        EventHandler.add(this.filterInput, 'input', this.onInput, this);
-        EventHandler.add(this.filterInput, 'keyup', this.KeyUp, this);
-        EventHandler.add(this.filterInput, 'keydown', this.onKeyDown, this);
     };
     ListBox.prototype.selectHandler = function (e, isKey) {
         var isSelect = true;
@@ -14576,5 +14649,5 @@ var listBoxClasses = {
  * export all modules from current location
  */
 
-export { incrementalSearch, Search, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, SelectionSettings, ToolbarSettings, ListBox };
+export { incrementalSearch, Search, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, SelectionSettings, ToolbarSettings, ListBox };
 //# sourceMappingURL=ej2-dropdowns.es5.js.map