@syncfusion/ej2-dropdowns 33.2.4 → 33.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.4
+*  version : 33.2.5
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "33.2.4",
+  "version": "33.2.5",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,12 +9,12 @@
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-data": "~33.2.3",
-    "@syncfusion/ej2-inputs": "~33.2.4",
+    "@syncfusion/ej2-data": "~33.2.5",
+    "@syncfusion/ej2-inputs": "~33.2.5",
     "@syncfusion/ej2-lists": "~33.2.3",
     "@syncfusion/ej2-navigations": "~33.2.4",
     "@syncfusion/ej2-notifications": "~33.2.3",
-    "@syncfusion/ej2-popups": "~33.2.3"
+    "@syncfusion/ej2-popups": "~33.2.5"
   },
   "devDependencies": {},
   "keywords": [

package/src/drop-down-base/drop-down-base.d.ts

@@ -281,6 +281,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isVirtualTrackHeight: boolean;
     protected virtualSelectAll: boolean;
     protected isVirtualReorder: boolean;
+    protected isVirtualOrder: boolean;
     protected incrementalQueryString: string;
     protected incrementalEndIndex: number;
     protected incrementalStartIndex: number;

package/src/drop-down-base/drop-down-base.js

@@ -125,6 +125,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isVirtualTrackHeight = false;
         _this.virtualSelectAll = false;
         _this.isVirtualReorder = false;
+        _this.isVirtualOrder = false;
         _this.incrementalQueryString = '';
         _this.incrementalEndIndex = 0;
         _this.incrementalStartIndex = 0;
@@ -1591,6 +1592,9 @@ var DropDownBase = /** @class */ (function (_super) {
             if (this.getModuleName() === 'multiselect' && (this.virtualSelectAll && !isClearAll)) {
                 this.virtualSelectAllData = listData;
                 listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
+                if (this.virtualSelectAllData.length < (this.itemCount * 2) && this.isCheckBoxSelection && this.isVirtualOrder) {
+                    listData = this.virtualSelectAllData;
+                }
             }
             ulElement = this.createListItems(listData, fields);
             if (this.isIncrementalRequest) {
@@ -1614,6 +1618,12 @@ var DropDownBase = /** @class */ (function (_super) {
                         else {
                             virtualUlElement.appendChild(ulElement);
                         }
+                        if (this.getModuleName() === 'multiselect' && this.isCheckBoxSelection && !this.appendUncheckList && this.isVirtualOrder) {
+                            var selectedUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
+                            if (!isNullOrUndefined(selectedUlElement)) {
+                                virtualUlElement.removeChild(selectedUlElement);
+                            }
+                        }
                     }
                     this.updateListElements(listData);
                 }

package/src/multi-select/multi-select.d.ts

@@ -78,6 +78,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isFilteringAction;
     private headerTemplateHeight;
     private resizeHandler;
+    private scrollEvent;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -673,6 +674,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private virtualCustomData;
     private isSelectAllLoop;
     private initialPopupHeight;
+    private chipAnnouncerLiveRegion;
     private enableRTL;
     requiredModules(): ModuleDeclaration[];
     private updateHTMLAttribute;
@@ -820,6 +822,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private resetValueHandler;
     protected wireEvent(): void;
     private onInput;
+    private onWheelScroll;
     private pasteHandler;
     protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
     protected search(e: KeyboardEventArgs): void;

package/src/multi-select/multi-select.js

@@ -543,7 +543,9 @@ var MultiSelect = /** @class */ (function (_super) {
             if (isCheckbox) {
                 var startindex = this.viewPortInfo.startIndex;
                 var endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
-                    valuecheck[(startindex + this.viewPortInfo.endIndex)]) ? (startindex + this.viewPortInfo.endIndex)
+                    valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
+                    (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
+                    ? (startindex + this.viewPortInfo.endIndex)
                     : (valuecheck.length);
                 for (var i = startindex; i < endindex; i++) {
                     var value = this.allowObjectBinding ? getValue((this.fields.value) ?
@@ -2318,6 +2320,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.value)) {
                 this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
             }
+            var removedChipTitle = selectedElem.getAttribute('title');
             temp = selectedElem.nextElementSibling;
             if (temp !== null) {
                 this.removeChipSelection();
@@ -2329,6 +2332,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.removeValue(currentChip, e);
             this.updateDelimeter(this.delimiterChar, e);
             this.makeTextBoxEmpty();
+            if (removedChipTitle && this.chipAnnouncerLiveRegion) {
+                var remainingCount = this.value ? this.value.length : 0;
+                var announcement = removedChipTitle + " removed from selection " + remainingCount + " items selected";
+                this.chipAnnouncerLiveRegion.textContent = announcement;
+            }
         }
         if (this.closePopupOnSelect) {
             this.hidePopup(e);
@@ -2521,6 +2529,7 @@ var MultiSelect = /** @class */ (function (_super) {
             var selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP + '.' + CHIP_SELECTED);
             if (selectedChips && selectedChips.length === 1) {
                 selectedChips[0].removeAttribute('id');
+                selectedChips[0].removeAttribute('aria-hidden');
                 if (!isNullOrUndefined(this.inputElement) && this.inputElement.hasAttribute('aria-activedescendant')) {
                     this.inputElement.removeAttribute('aria-activedescendant');
                     if (!this.inputElement.hasAttribute('aria-describedby') && this.chipCollectionWrapper.id) {
@@ -2535,16 +2544,18 @@ var MultiSelect = /** @class */ (function (_super) {
         addClass([element], CHIP_SELECTED);
         if (element) {
             element.setAttribute('id', this.element.id + '_chip_item');
+            element.setAttribute('aria-hidden', 'true');
+            var chipTitle = element.getAttribute('title');
+            if (chipTitle && this.chipAnnouncerLiveRegion) {
+                var announcement = chipTitle + " focused. Press Backspace to remove";
+                this.chipAnnouncerLiveRegion.textContent = announcement;
+            }
             if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
                 if (this.inputElement.hasAttribute('aria-describedby')) {
                     this.inputElement.removeAttribute('aria-describedby');
                 }
             }
-            var chipClose = element.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);
-            if (chipClose) {
-                chipClose.removeAttribute('aria-hidden');
-            }
         }
         this.trigger('chipSelection', e);
     };
@@ -3031,15 +3042,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);
         if (Browser.isDevice) {
             for (var index = 0; index < closeElements.length; index++) {
-                closeElements[index].setAttribute('aria-hidden', 'true');
                 closeElements[index].style.display = 'none';
             }
         }
-        else {
-            for (var index = 0; index < closeElements.length; index++) {
-                closeElements[index].setAttribute('aria-hidden', 'true');
-            }
-        }
     };
     MultiSelect.prototype.onMobileChipInteraction = function (e) {
         var chipElem = closest(e.target, '.' + CHIP);
@@ -3080,7 +3085,7 @@ var MultiSelect = /** @class */ (function (_super) {
         });
         var compiledString;
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
-        var chipClose = this.createElement('span', { className: CHIP_CLOSE, attrs: { 'aria-label': 'delete', 'aria-hidden': 'true', 'tabindex': '-1' } });
+        var chipClose = this.createElement('span', { className: CHIP_CLOSE, attrs: { 'aria-hidden': 'true' } });
         if (this.mainData) {
             itemData = this.getDataByValue(value);
         }
@@ -3348,6 +3353,11 @@ var MultiSelect = /** @class */ (function (_super) {
                     }, targetExitViewport: function () {
                         if (!Browser.isDevice) {
                             _this.hidePopup();
+                            var previousValue = _this.tempValues;
+                            if (isNullOrUndefined(previousValue)) {
+                                previousValue = [];
+                            }
+                            _this.updateValueState(_this.scrollEvent, _this.value, previousValue);
                         }
                     }
                 });
@@ -3628,6 +3638,8 @@ var MultiSelect = /** @class */ (function (_super) {
         EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);
         EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
         EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);
+        EventHandler.add(document, 'wheel', this.onWheelScroll, this);
+        EventHandler.add(document, 'scroll', this.onWheelScroll, this);
     };
     MultiSelect.prototype.onInput = function (e) {
         if (this.keyDownStatus) {
@@ -3642,6 +3654,9 @@ var MultiSelect = /** @class */ (function (_super) {
             this.search(e);
         }
     };
+    MultiSelect.prototype.onWheelScroll = function (e) {
+        this.scrollEvent = e;
+    };
     MultiSelect.prototype.pasteHandler = function (event) {
         var _this = this;
         setTimeout(function () {
@@ -4138,7 +4153,7 @@ var MultiSelect = /** @class */ (function (_super) {
             else {
                 this.updateDelimeter(this.delimiterChar, null, isInitialVirtualData);
             }
-            if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length)) {
+            if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length || (this.value.length !== this.listData.length))) {
                 this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });
             }
             if (this.mode === 'Box' || (this.mode === 'Default' && this.inputFocus)) {
@@ -4957,6 +4972,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.inputElement)) {
             EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
+        EventHandler.remove(document, 'wheel', this.onWheelScroll);
+        EventHandler.remove(document, 'scroll', this.onWheelScroll);
     };
     MultiSelect.prototype.resizingWireEvent = function () {
         // Mouse events
@@ -5270,12 +5287,18 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.virtualSelectAllState = state;
                     this.virtualSelectAll = true;
                     this.CurrentEvent = event;
+                    if (this.mode === 'CheckBox' && this.value && Array.isArray(this.value) && this.value.length > 0 && this.enableSelectionOrder && this.targetElement().trim() === '' && this.viewPortInfo.startIndex < this.value.length) {
+                        this.isVirtualOrder = true;
+                    }
                     if (!this.virtualSelectAllData) {
                         this.resetList(this.dataSource, this.fields, new Query());
                     }
                     if (this.virtualSelectAllData) {
                         this.virtualSelectionAll(state, li, event);
                     }
+                    if (this.mode === 'CheckBox' && this.value && Array.isArray(this.value) && this.value.length > 0 && this.enableSelectionOrder && this.targetElement().trim() === '' && this.viewPortInfo.startIndex < this.value.length) {
+                        this.isVirtualOrder = false;
+                    }
                 }
                 else {
                     while (index < length && index <= 50 && index < count) {
@@ -5574,7 +5597,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
-                    this.updateVal(this.value, oldProp.value, 'value');
+                    this.updateVal(this.value, oldProp.value, 'value', this.enableVirtualization);
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
                         this.refreshPopup();
@@ -5770,9 +5793,10 @@ var MultiSelect = /** @class */ (function (_super) {
             _this.updateActionList(ulElement, list, event);
         });
     };
-    MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
+    MultiSelect.prototype.updateVal = function (newProp, oldProp, prop, isVirtual) {
         var _this = this;
-        if (!this.list) {
+        if (isVirtual === void 0) { isVirtual = false; }
+        if (!this.list || (isVirtual && prop === 'value' && ((isNullOrUndefined(oldProp) && !isNullOrUndefined(newProp)) || (!isNullOrUndefined(oldProp) && isNullOrUndefined(newProp)) || (this.validateValues(newProp, oldProp) && newProp.length > 0)))) {
             this.onLoadSelect();
             if (this.enableVirtualization) {
                 this.setProperties({ text: '' }, true);
@@ -6296,6 +6320,14 @@ var MultiSelect = /** @class */ (function (_super) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
+        if (!this.chipAnnouncerLiveRegion) {
+            this.chipAnnouncerLiveRegion = this.createElement('div', {
+                attrs: { 'aria-live': 'polite', 'aria-atomic': 'true', 'class': 'e-chip-announcer' }
+            });
+            this.chipAnnouncerLiveRegion.style.position = 'absolute';
+            this.chipAnnouncerLiveRegion.style.left = '-10000px';
+            this.componentWrapper.appendChild(this.chipAnnouncerLiveRegion);
+        }
         this.renderComplete();
     };
     MultiSelect.prototype.setResize = function () {
@@ -6917,6 +6949,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.mainListCollection = null;
         this.footer = null;
         this.selectAllEventEle = null;
+        this.chipAnnouncerLiveRegion = null;
         _super.prototype.destroy.call(this);
     };
     __decorate([