@syncfusion/ej2-dropdowns 18.1.57 → 18.2.44-4569

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

@@ -13,6 +13,7 @@ let queryString = '';
 let prevString = '';
 let matches$1 = [];
 let activeClass = 'e-active';
+let 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 @@ let 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(() => { queryString = ''; }, 1000);
     let index;
     queryString = ignoreCase ? queryString.toLowerCase() : queryString;
-    if (prevString === queryString) {
+    if (prevElementId === elementId && prevString === queryString) {
         for (let 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,12 +140,12 @@ function revertHighlightSearch(content) {
  * Common source
  */
 
-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 __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;
+};
 class FieldSettings extends ChildProperty {
 }
 __decorate([
@@ -1307,12 +1309,12 @@ DropDownBase = __decorate([
  * export all modules from current location
  */
 
-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 __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 
@@ -1869,7 +1871,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     ;
     removeHover() {
         if (this.list) {
-            let hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
+            let 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);
             }
@@ -1882,7 +1886,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     ;
     incrementalSearch(e) {
         if (this.liCollections.length > 0) {
-            let li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.isServerBlazor);
+            let li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id, this.isServerBlazor);
             if (!isNullOrUndefined(li)) {
                 this.setSelection(li, e);
                 this.setScrollPosition();
@@ -3046,7 +3050,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     updateServerPopup(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');
@@ -3074,7 +3078,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.isDocumentClick = false;
                 this.destroyPopup();
                 let 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);
                 }
@@ -3528,6 +3532,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         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 };
+        }
     }
     updateDataSource(props) {
         if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
@@ -3614,7 +3621,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.text, oldProp.text, 'text');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.setOldText(oldProp.text);
                             }
                         }
@@ -3640,7 +3647,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.value, oldProp.value, 'value');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.setOldValue(oldProp.value);
                             }
                         }
@@ -3658,14 +3665,14 @@ let DropDownList = class DropDownList extends DropDownBase {
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
+                    if (!this.initRemoteRender && this.liCollections) {
                         let 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;
                             }
                         }
@@ -3788,7 +3795,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!this.isServerBlazor) {
             this.invokeRenderPopup();
         }
-        if (this.isServerBlazor && !isNullOrUndefined(this.list) && (this.getModuleName() === 'dropdownlist' || !this.isFiltering())) {
+        let popupHolderEle = !this.isFiltering() || document.querySelector('#' + this.element.id + '_popup_holder');
+        let isDropdownComp = this.getModuleName() === 'dropdownlist' || !this.isFiltering();
+        if (this.isServerBlazor && popupHolderEle && !isNullOrUndefined(this.list) && isDropdownComp) {
             this.invokeRenderPopup();
         }
     }
@@ -3859,6 +3868,11 @@ let DropDownList = class DropDownList extends DropDownBase {
     updateclientItemData(data) {
         this.listData = data;
     }
+    initValueItemData(selectData) {
+        this.itemData = selectData;
+        this.previousValue = this.value;
+        this.initial = false;
+    }
     serverUpdateListElement(data, popupEle) {
         this.listData = data;
         if (this.ulElement) {
@@ -3892,8 +3906,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         this.closePopup();
         let dataItem = this.getItemData();
+        let 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);
         }
@@ -4093,12 +4108,12 @@ DropDownList = __decorate$1([
  * export all modules from current location
  */
 
-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 __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;
+};
 const RTL = 'e-rtl';
 const DROPDOWNTREE = 'e-ddt';
 const HIDDENELEMENT = 'e-ddt-hidden';
@@ -5293,6 +5308,10 @@ let DropDownTree = class DropDownTree extends Component {
                     this.changeState(wrap, 'check');
                     this.checkSelectAll = false;
                 }
+                if (this.allowFiltering) {
+                    removeClass([this.inputWrapper], [INPUTFOCUS]);
+                    this.filterObj.element.focus();
+                }
                 let eventArgs = { popup: this.popupObj };
                 this.trigger('open', eventArgs);
             }
@@ -5392,18 +5411,17 @@ let DropDownTree = class DropDownTree extends Component {
         let target = e.target;
         let isTree = closest(target, '.' + PARENTITEM);
         let isFilter = closest(target, '.' + FILTERWRAP);
-        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isFilter)) ||
+        let 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)) {
-            let 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);
         }
     }
     onActionFailure(e) {
@@ -6493,6 +6511,9 @@ let DropDownTree = class DropDownTree extends Component {
             this.popupObj.hide();
             if (this.inputFocus) {
                 this.inputWrapper.focus();
+                if (this.allowFiltering) {
+                    addClass([this.inputWrapper], [INPUTFOCUS]);
+                }
             }
             this.trigger('close', eventArgs);
         }
@@ -6678,12 +6699,12 @@ DropDownTree = __decorate$2([
  * export all modules from current location
  */
 
-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 __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 */
@@ -7476,12 +7497,12 @@ ComboBox = __decorate$3([
  * export all modules from current location
  */
 
-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 __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 */
@@ -7994,12 +8015,12 @@ function floatLabelBlur(overAllWrapper, componentWrapper, value, floatLabelType,
     }
 }
 
-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 __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 */
@@ -8380,6 +8401,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         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();
@@ -8395,7 +8419,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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) {
@@ -8739,8 +8763,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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);
@@ -8791,6 +8823,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);
             this.setPlaceholderSize(downIconWidth);
         }
+        else {
+            if (!isNullOrUndefined(this.dropIcon)) {
+                this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);
+            }
+        }
     }
     setPlaceholderSize(downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
@@ -9903,16 +9940,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                     if (this.itemTemplate && (isBlazor() && this.isServerRendered)) {
                                         setTimeout(() => { 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();
@@ -10304,7 +10341,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     updateActionCompleteData(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);
+            }
         }
     }
     updateAddItemList(list, itemCount) {
@@ -10821,7 +10860,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             let 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;
@@ -10937,7 +10978,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             '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)');
@@ -11227,28 +11268,62 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.renderPopup();
     }
+    presentItemValue(ulElement) {
+        let valuecheck = [];
+        for (let i = 0; i < this.value.length; i++) {
+            let 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;
+    }
+    ;
+    addNonPresentItems(valuecheck, ulElement, list, event) {
+        this.showSpinner();
+        this.dataSource.executeQuery(this.getForQuery(valuecheck)).then((e) => {
+            this.hideSpinner();
+            this.addItem(e.result, list.length);
+            this.updateActionList(ulElement, list, event);
+        });
+    }
+    ;
     updateVal(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 {
+            let 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);
@@ -12273,12 +12348,12 @@ class CheckBoxSelection {
  * export all modules from current location
  */
 
-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 __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 ListBox_1;
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 const ITEMTEMPLATE_PROPERTY$1 = 'ItemTemplate';
@@ -12337,6 +12412,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     constructor(options, element) {
         super(options, element);
         this.isValidKey = false;
+        this.keyDownStatus = false;
     }
     /**
      * Adds a new item to the popup list. By default, new item appends to the list as the last item,
@@ -12380,12 +12456,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     updateBlazorListData(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();
     }
     initWrapper() {
         let hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
@@ -12429,9 +12505,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     initDraggable() {
-        if (this.ulElement) {
-            this.ulElement.id = this.element.id + '_parent';
-        }
         if (this.allowDragAndDrop) {
             new Sortable(this.ulElement, {
                 scope: this.scope,
@@ -12567,7 +12640,13 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     onInput() {
-        this.isValidKey = true;
+        if (this.keyDownStatus) {
+            this.isValidKey = true;
+        }
+        else {
+            this.isValidKey = false;
+        }
+        this.keyDownStatus = false;
         this.refreshClearIcon();
     }
     clearText() {
@@ -12585,21 +12664,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     onActionComplete(ulElement, list, e) {
         let 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.onActionComplete(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();
@@ -12619,11 +12689,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         else {
             if (this.allowFiltering) {
-                let filterElem = this.list.getElementsByClassName('e-input-filter')[0];
-                let txtLength = this.filterInput.value.length;
-                filterElem.selectionStart = txtLength;
-                filterElem.selectionEnd = txtLength;
-                filterElem.focus();
+                this.list.getElementsByClassName('e-input-filter')[0].focus();
             }
         }
         this.initLoad = false;
@@ -12931,6 +12997,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             let dupData = [];
             let itemIdx;
             extend(dupData, [], this.listData);
+            let removeIdxes = [];
+            let removeLiIdxes = [];
             for (let j = 0; j < items.length; j++) {
                 if (items[j] instanceof Object) {
                     dataValue = getValue(fields.value, items[j]);
@@ -12948,11 +13016,17 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     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 (let k = removeIdxes.length - 1; k > 0; k--) {
+                this.listData.splice(removeIdxes[k], 1);
+            }
+            for (let k = removeLiIdxes.length - 1; k > 0; k--) {
+                this.liCollections.splice(removeLiIdxes[k], 1);
+            }
         }
         else {
             itemIndex = itemIndex ? itemIndex : 0;
@@ -12963,6 +13037,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         for (let 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.
@@ -13158,7 +13235,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         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) {
@@ -13220,6 +13297,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     className: listBoxClasses.filterInput
                 });
                 this.element.parentNode.insertBefore(this.filterInput, this.element);
+                if (Browser.isDevice) {
+                    
+                }
                 filterInputObj = Input.createInput({
                     element: this.filterInput,
                     buttons: [listBoxClasses.filterBarClearIcon],
@@ -13242,24 +13322,16 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 addClass([this.list], 'e-filter-list');
             }
             this.inputString = this.filterInput.value;
-            this.filterWireEvents();
-            return filterInputObj;
-        }
-    }
-    filterWireEvents(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);
     }
     selectHandler(e, isKey) {
         let isSelect = true;
@@ -14345,5 +14417,5 @@ const 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.es2015.js.map