@syncfusion/ej2-dropdowns 30.1.42 → 30.2.5

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

@@ -430,6 +430,9 @@ class VirtualScroll {
                     isListUpdated = false;
                 }
                 else if (this.parent.viewPortInfo.startIndex !== 0) {
+                    if (this.parent.dataSource instanceof DataManager) {
+                        this.parent.setCurrentView = false;
+                    }
                     this.parent.updateVirtualReOrderList(true);
                     const oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
                     if (oldUlElement) {
@@ -1718,6 +1721,86 @@ let DropDownBase = class DropDownBase extends Component {
             this.fiteredGroupHeaderItems = clonedHeaders;
         }
     }
+    setCustomListData(dataSource, fields, query, event) {
+        fields = fields ? fields : this.fields;
+        let ulElement;
+        this.isActive = true;
+        this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
+        if (!this.isRequesting) {
+            this.isRequesting = true;
+            this.showSpinner();
+            this.isRequesting = false;
+            let isReOrder = true;
+            let listItems;
+            if (this.isVirtualizationEnabled && !this.virtualGroupDataSource && this.fields.groupBy) {
+                const data = new DataManager(this.dataSource).executeLocal(new Query().group(this.fields.groupBy));
+                this.virtualGroupDataSource = data.records;
+            }
+            const dataManager = this.isVirtualizationEnabled &&
+                this.virtualGroupDataSource
+                && !this.isCustomDataUpdated ? new DataManager(this.virtualGroupDataSource) :
+                new DataManager(dataSource);
+            listItems = (this.getQuery(query)).executeLocal(dataManager);
+            if (!this.virtualSelectAll) {
+                const newQuery = this.getQuery(query);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (this.isVirtualizationEnabled && (listItems.count !== 0 &&
+                    listItems.count < (this.itemCount * 2)) && !this.appendUncheckList) {
+                    if (newQuery) {
+                        for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                            if (newQuery.queries[queryElements].fn === 'onTake') {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                newQuery.queries[queryElements].e.nos = listItems.count;
+                                listItems = (newQuery).executeLocal(dataManager);
+                            }
+                            if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !this.isCustomFiltering) {
+                                isReOrder = false;
+                            }
+                        }
+                        if (isReOrder) {
+                            listItems = (newQuery).executeLocal(dataManager);
+                            this.isVirtualTrackHeight = (!(this.dataSource instanceof DataManager) &&
+                                !this.isCustomDataUpdated) ? true : false;
+                        }
+                    }
+                }
+                else {
+                    this.isVirtualTrackHeight = false;
+                    if (newQuery) {
+                        for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                            if (this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
+                                isReOrder = false;
+                            }
+                        }
+                    }
+                }
+            }
+            if (isReOrder && (!(this.dataSource instanceof DataManager) && !this.isCustomDataUpdated) &&
+                !this.virtualSelectAll) {
+                // eslint-disable @typescript-eslint/no-explicit-any
+                this.dataCount = this.totalItemCount = this.virtualSelectAll ? listItems.length :
+                    listItems.count;
+            }
+            listItems = this.isVirtualizationEnabled ? listItems.result : listItems;
+            this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
+            this.isCustomFiltering = false;
+            if (this.isIncrementalRequest) {
+                ulElement = this.renderItems(listItems, fields);
+                return;
+            }
+            ulElement = this.renderItems(listItems, fields);
+            this.onActionComplete(ulElement, listItems, event);
+            if (this.groupTemplate) {
+                this.renderGroupTemplate(ulElement);
+            }
+            this.bindChildItems(listItems, ulElement, fields);
+            setTimeout(() => {
+                if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
+                    this.updateDataList();
+                }
+            });
+        }
+    }
     handleVirtualKeyboardActions(e, pageCount) {
         // Used this method in component side.
     }
@@ -2436,7 +2519,12 @@ let DropDownBase = class DropDownBase extends Component {
             }
             dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
             this.addedNewItem = false;
-            this.setListData(dataSource, fields, query, e);
+            if (this.isCustomReset && this.getModuleName() === 'multiselect') {
+                this.setCustomListData(dataSource, fields, query, e);
+            }
+            else {
+                this.setListData(dataSource, fields, query, e);
+            }
         }
     }
     updateSelectElementData(isFiltering) {
@@ -4504,6 +4592,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
             this.activeIndex = this.getIndexByValueFilter(dataItem.value, this.actionCompleteData.ulElement);
+            if (isNullOrUndefined(this.activeIndex)) {
+                this.activeIndex = this.getIndexByValue(dataItem.value);
+            }
         }
         const clearIcon = dropDownListClasses.clearIcon;
         const isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
@@ -5511,7 +5602,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 popupEle.setAttribute('aria-label', this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 const searchBox = this.setSearchBox(popupEle);
-                this.listContainerHeight = this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ?
+                this.listContainerHeight = this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice && this.isDeviceFullScreen ?
                     formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(this.popupHeight);
                 if (this.headerTemplate) {
                     this.setHeaderTemplate(popupEle);
@@ -13329,7 +13420,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         const isContainsValue = valuecheck.some((item) => item !== null);
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null && isContainsValue) {
+            && this.listData != null && (!this.enableVirtualization || (this.enableVirtualization && this.valueTemplate)) && isContainsValue) {
             this.isaddNonPresentItems = true;
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             this.isaddNonPresentItems = false;
@@ -13824,6 +13915,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     checkForCustomValue(query, fields) {
         const dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
         const field = fields ? fields : this.fields;
+        this.isCustomReset = true;
         if (this.allowCustomValue && dataChecks) {
             const value = this.inputElement.value;
             const customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
@@ -13877,6 +13969,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     const tempData = JSON.parse(JSON.stringify(this.listData));
                     tempData.splice(0, 0, dataItem);
                     this.resetList(tempData, field, query);
+                    this.focusAtLastListItem(value);
                 }
             }
             else if (this.listData) {
@@ -13905,6 +13998,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
         }
+        this.isCustomReset = false;
         if (this.value && this.value.length) {
             this.refreshSelection();
         }
@@ -15170,11 +15264,20 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     removeChipSelection() {
         if (this.chipCollectionWrapper) {
+            const selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);
+            if (selectedChips && selectedChips.length > 0) {
+                for (let i = 0; i < selectedChips.length; i++) {
+                    selectedChips[i].removeAttribute('aria-live');
+                }
+            }
             this.removeChipFocus();
         }
     }
     addChipSelection(element, e) {
         addClass([element], CHIP_SELECTED);
+        if (element) {
+            element.setAttribute('aria-live', 'polite');
+        }
         this.trigger('chipSelection', e);
     }
     getVirtualDataByValue(value) {
@@ -15372,6 +15475,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         const collection = this.list.querySelectorAll('li.'
                             + dropDownBaseClasses.li + ':not(.e-active)');
                         removeClass(collection, 'e-disable');
+                        const mainListCollection = this.mainList.querySelectorAll('li.'
+                            + dropDownBaseClasses.li + ':not(.e-active)');
+                        removeClass(mainListCollection, 'e-disable');
                     }
                     this.trigger('removed', eventArgs);
                     const targetEle = eve && eve.currentTarget;
@@ -15666,7 +15772,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         let itemData = { text: value, value: value };
         const chip = this.createElement('span', {
             className: CHIP$1,
-            attrs: { 'data-value': value, 'title': data }
+            attrs: { 'data-value': value, 'title': data, 'role': 'option', 'aria-selected': 'true' }
         });
         let compiledString;
         const chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });
@@ -18216,7 +18322,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             const isContainsValue = valuecheck.some((item) => item !== null);
             if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-                && this.listData != null && isContainsValue) {
+                && this.listData != null && (!this.enableVirtualization || (this.enableVirtualization && this.valueTemplate))
+                && isContainsValue) {
                 this.mainData = null;
                 this.setDynValue = true;
                 this.isaddNonPresentItems = true;
@@ -18528,6 +18635,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         else {
             this.setProperties({ value: null }, true);
         }
+        this.checkAndResetCache();
+        if (this.enableVirtualization) {
+            this.updateInitialData();
+            if (this.chipCollectionWrapper) {
+                this.chipCollectionWrapper.innerHTML = '';
+            }
+            if (!this.isCustomDataUpdated) {
+                this.notify('setGeneratedData', {
+                    module: 'VirtualScroll'
+                });
+            }
+            this.list.scrollTop = 0;
+            this.virtualListInfo = null;
+            this.previousStartIndex = 0;
+            this.previousEndIndex = this.itemCount;
+        }
     }
     /**
      * To Initialize the control rendering
@@ -20089,6 +20212,22 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
             this.popupWrapper = this.list;
             this.checkBoxSelectionModule.checkAllParent = null;
+            if (this.filterParent) {
+                const parentNode = this.filterParent.parentNode;
+                if (parentNode) {
+                    const firstChild = this.filterParent.querySelector('input.e-input-filter');
+                    if (!firstChild.classList.contains('e-input-focus') && !firstChild.classList.contains('e-valid-input')
+                        && this.selectedListItemCount === 0) {
+                        this.filterParent = null;
+                    }
+                    if (this.selectedListItemCount > 0 && this.showSelectAll) {
+                        this.filterParent = null;
+                    }
+                }
+                else {
+                    this.filterParent = null;
+                }
+            }
             this.notify('selectAll', {});
         }
     }
@@ -20196,7 +20335,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     setHeight() {
         const ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
         ele.style.height = formatUnit(this.height);
-        if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {
+        if (this.allowFiltering && this.height.toString().indexOf('%') > 0) {
             addClass([this.list], 'e-filter-list');
         }
         else {
@@ -20284,6 +20423,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
         }
         super.onActionComplete(ulElement, list, e);
+        this.initWrapper();
         if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
             this.list.insertBefore(searchEle, this.list.firstElementChild);
             this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
@@ -20302,7 +20442,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 });
             }
         }
-        this.initWrapper();
         this.setSelection(this.value, true, false, !this.isRendered);
         this.initDraggable();
         this.mainList = this.ulElement;
@@ -21106,6 +21245,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
         }
         const len = this.getSelectedItems().length;
+        this.selectedListItemCount = len;
         if (this.showSelectAll && searchCount) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection',
                 value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate' });
@@ -21914,7 +22054,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             e.preventDefault();
             return;
         }
-        const char = String.fromCharCode(e.keyCode);
+        const char = e.code && e.keyCode >= 96 && e.keyCode <= 105 ?
+            String.fromCharCode(e.keyCode - 48) : String.fromCharCode(e.keyCode);
         const isWordCharacter = char.match(/\w/);
         const isWordAccentCharacter = char.match(/[A-Za-z0-9\u00C0-\u024F ]/);
         if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter)) {