@syncfusion/ej2-dropdowns 32.2.7 → 32.2.9

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

@@ -368,7 +368,7 @@ class VirtualScroll {
         if (this.component === 'combobox') {
             let totalData = 0;
             if (this.parent.dataSource instanceof DataManager) {
-                totalData = this.parent.remoteDataCount;
+                totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5530,7 +5530,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         });
         return checkField;
     }
-    checkAndFetchItemData(list, value, checkField) {
+    checkAndFetchItemData(list, value, checkField, isOffline = false) {
         const fieldValue = this.fields.value.split('.');
         let checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
             this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
@@ -5539,27 +5539,66 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
         }
         if (!checkVal && this.dataSource instanceof DataManager) {
-            (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
-                .then((e) => {
-                if (e.result.length > 0) {
-                    if (!this.enableVirtualization) {
-                        this.addItem(e.result, list.length);
+            if (isOffline) {
+                this.searchOfflineData(value, checkField);
+            }
+            else {
+                (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
+                    .then((e) => {
+                    if (e.result.length > 0) {
+                        if (!this.enableVirtualization) {
+                            this.addItem(e.result, list.length);
+                        }
+                        else {
+                            this.itemData = e.result[0];
+                            const dataItem = this.getItemData();
+                            if ((this.value === dataItem.value && this.text !== dataItem.text) ||
+                                (this.value !== dataItem.value && this.text === dataItem.text)) {
+                                this.setProperties({ text: dataItem.text.toString() });
+                                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+                            }
+                        }
+                        this.updateValues();
                     }
                     else {
-                        this.itemData = e.result[0];
-                        const dataItem = this.getItemData();
-                        if ((this.value === dataItem.value && this.text !== dataItem.text) ||
-                            (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ text: dataItem.text.toString() });
-                            Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
-                        }
+                        this.updateValues();
                     }
-                    this.updateValues();
-                }
-                else {
-                    this.updateValues();
+                });
+            }
+        }
+        else {
+            this.updateValues();
+        }
+    }
+    searchOfflineData(value, checkField) {
+        if (!(this.dataSource instanceof DataManager)) {
+            this.updateValues();
+            return;
+        }
+        const dataManager = this.dataSource;
+        const fullData = dataManager.dataSource.json || [];
+        if (fullData && fullData.length > 0) {
+            const foundItem = fullData.find((item) => {
+                if (this.fields.value && this.fields.value.includes('.')) {
+                    const fieldValueArray = this.fields.value.split('.');
+                    const fieldVal = this.checkFieldValue(item, fieldValueArray);
+                    return fieldVal === value;
                 }
+                return item[checkField] === value;
             });
+            if (foundItem) {
+                this.itemData = foundItem;
+                const dataItem = this.getItemData();
+                if ((this.value === dataItem.value && this.text !== dataItem.text) ||
+                    (this.value !== dataItem.value && this.text === dataItem.text)) {
+                    this.setProperties({ text: dataItem.text.toString() });
+                    Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+                }
+                this.updateValues();
+            }
+            else {
+                this.updateValues();
+            }
         }
         else {
             this.updateValues();
@@ -5679,7 +5718,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.setFooterTemplate(popupEle);
                     this.isUpdateFooterHeight = this.footer.offsetHeight !== 0;
                 }
-                document.body.appendChild(popupEle);
+                const appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(popupEle);
                 popupEle.style.top = '0px';
                 initialPopupHeight = popupEle.clientHeight;
                 if (this.enableVirtualization && (this.itemTemplate || this.isAngular)) {
@@ -5940,6 +5980,16 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         });
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            const popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     checkCollision(popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {
             const collision = isCollide(popupEle);
@@ -6705,7 +6755,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         const listParentHeight = formatUnit(this.popupHeight);
         listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
         listParent.appendChild(item);
-        document.body.appendChild(listParent);
+        const appendToElement = this.getAppendToElement();
+        appendToElement.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
         const listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
@@ -6979,10 +7030,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     if (this.enableVirtualization) {
                         if (newProp.value && this.dataSource instanceof DataManager) {
+                            const isOfflineMode = this.dataSource instanceof DataManager &&
+                                this.dataSource.dataSource.offline === true;
                             const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                             const value = this.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                 getValue(checkField, newProp.value) : newProp.value;
-                            this.checkAndFetchItemData(this.listData, value, checkField);
+                            this.checkAndFetchItemData(this.listData, value, checkField, isOfflineMode);
                         }
                         this.updateValues();
                         this.updateInputFields();
@@ -15322,7 +15375,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
             else {
-                this.onActionComplete(list, this.mainData);
+                const listUl = this.list && this.list.querySelector('ul');
+                const isFullList = this.isReact && this.itemTemplate && listUl != null &&
+                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length;
+                this.onActionComplete(isFullList ? listUl : list, this.mainData);
             }
             this.focusAtLastListItem(data);
             if (this.value && this.value.length) {
@@ -15553,9 +15609,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         addClass([element], CHIP_SELECTED);
         if (element) {
             element.setAttribute('id', this.element.id + '_chip_item');
-            if (!isNullOrUndefined(this.inputElement) && element.id && !this.inputElement.hasAttribute('aria-activedescendant')) {
+            if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
             }
+            const chipClose = element.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);
+            if (chipClose) {
+                chipClose.removeAttribute('aria-hidden');
+            }
         }
         this.trigger('chipSelection', e);
     }
@@ -15950,6 +16010,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     dispatchSelect(value, eve, element, isNotTrigger, length, dataValue, text) {
         const list = this.listData;
         if (this.initStatus && !isNotTrigger && (!this.allowObjectBinding || (this.allowObjectBinding && value))) {
+            let selectAllArgsLocal = null;
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             const val = dataValue ? dataValue : this.getDataByValue(value);
             const eventArgs = {
@@ -15966,15 +16027,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.selectAllEventEle.push(element);
                     }
                     if (length === 1) {
-                        const args = {
+                        selectAllArgsLocal = {
                             event: eve,
                             items: this.selectAllEventEle,
                             itemData: this.selectAllEventData,
                             isInteracted: eve ? true : false,
                             isChecked: true
                         };
-                        this.trigger('selectedAll', args);
-                        this.selectAllEventData = [];
                     }
                     if (this.allowCustomValue && this.isServerRendered && this.listData !== list) {
                         this.listData = list;
@@ -16011,6 +16070,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox') {
                         super.scrollStop();
                     }
+                    if (selectAllArgsLocal) {
+                        this.trigger('selectedAll', selectAllArgsLocal);
+                        this.selectAllEventData = [];
+                    }
                 }
             });
         }
@@ -16023,12 +16086,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     removeChipFocus() {
         const elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);
         removeClass(elements, CHIP_SELECTED);
+        const closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE$1.split(' ')[0]);
         if (Browser.isDevice) {
-            const closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE$1.split(' ')[0]);
             for (let index = 0; index < closeElements.length; index++) {
+                closeElements[index].setAttribute('aria-hidden', 'true');
                 closeElements[index].style.display = 'none';
             }
         }
+        else {
+            for (let index = 0; index < closeElements.length; index++) {
+                closeElements[index].setAttribute('aria-hidden', 'true');
+            }
+        }
     }
     onMobileChipInteraction(e) {
         const chipElem = closest(e.target, '.' + CHIP$1);
@@ -16068,7 +16137,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         });
         let compiledString;
         const chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });
-        const chipClose = this.createElement('span', { className: CHIP_CLOSE$1 });
+        const chipClose = this.createElement('span', { className: CHIP_CLOSE$1, attrs: { 'aria-label': 'delete', 'aria-hidden': 'true', 'tabindex': '-1' } });
         if (this.mainData) {
             itemData = this.getDataByValue(value);
         }
@@ -17411,6 +17480,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     else {
                         e.preventDefault();
+                        if (this.value.length === this.listData.length && this.isPopupOpen()) {
+                            this.hidePopup(e);
+                        }
                     }
                     const isFilterData = this.targetElement().trim() !== '' ? true : false;
                     this.makeTextBoxEmpty();
@@ -19045,7 +19117,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER$1
+                className: CHIP_WRAPPER$1, attrs: { role: 'listbox' }
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {