@syncfusion/ej2-dropdowns 32.2.9 → 33.1.46

package/src/mention/mention.js

@@ -365,8 +365,10 @@ var Mention = /** @class */ (function (_super) {
             return;
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
-        var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
-        if (document.activeElement !== this.inputElement && !isRteImage) {
+        var activeParent = document.activeElement && document.activeElement.parentElement;
+        var isRteImage = activeParent && !!activeParent.querySelector('.e-rte-image');
+        var isBECodeDropdownFocused = activeParent && !!activeParent.querySelector('.e-blockeditor .e-code-block-container .e-input-group.e-input-focus');
+        if (document.activeElement !== this.inputElement && !isRteImage && !isBECodeDropdownFocused) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -391,7 +393,7 @@ var Mention = /** @class */ (function (_super) {
             if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
                 lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
             }
-            if (lastWordRange.includes(' ')) {
+            if (/\s|\u00A0/.test(lastWordRange)) {
                 return;
             }
         }
@@ -925,7 +927,9 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.setHeight = function (popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
-            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+            var parentStyle = getComputedStyle(this.list.parentElement);
+            var paddingY = parseInt(parentStyle.paddingTop || '0', 10) + parseInt(parentStyle.paddingBottom || '0', 10);
+            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2 - paddingY).toString() + 'px'; // due to box-sizing property
             popupEle.style.maxHeight = formatUnit(this.popupHeight);
         }
         else {

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

@@ -25,9 +25,15 @@ export function createFloatLabel(overAllWrapper, searchWrapper, element, inputEl
     var floatLabelElement = createElement('label', { className: FLOATTEXT });
     var id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
     element.id = id;
+    var isAngularComponent = false;
+    if (element.tagName && element.tagName.indexOf('EJS-') === 0 && inputElement.id === '' && element !== inputElement) {
+        inputElement.id = id + '_input';
+        isAngularComponent = true;
+    }
     if (!isNullOrUndefined(element.id) && element.id !== '') {
-        floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
-        floatLabelElement.setAttribute('for', element.id);
+        var labelTarget = isAngularComponent ? inputElement.id || element.id : element.id;
+        floatLabelElement.id = 'label_' + labelTarget.replace(/ /g, '_');
+        floatLabelElement.setAttribute('for', labelTarget);
         attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
     }
     if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {

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

@@ -45,6 +45,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private backCommand;
     private keyAction;
     private isSelectAll;
+    private isSelectAllClicked;
+    private isProcessingVirtualSelectAll;
     private clearIconWidth;
     private previousFilterText;
     private selectedElementID;

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

@@ -1434,7 +1434,15 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
             if (this.dropIcon.offsetWidth !== 0) {
-                this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';
+                var totalIconWidth = downIconWidth + 10;
+                if (this.showClearButton && this.overAllClear) {
+                    var display = this.overAllClear.style.display;
+                    this.overAllClear.style.display = 'block';
+                    var clearWidth = this.overAllClear.offsetWidth;
+                    totalIconWidth += clearWidth;
+                    this.overAllClear.style.display = display;
+                }
+                this.searchWrapper.style.width = 'calc(100% - ' + totalIconWidth + 'px)';
             }
             else {
                 addClass([this.searchWrapper], CUSTOM_WIDTH);
@@ -2515,6 +2523,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 selectedChips[0].removeAttribute('id');
                 if (!isNullOrUndefined(this.inputElement) && this.inputElement.hasAttribute('aria-activedescendant')) {
                     this.inputElement.removeAttribute('aria-activedescendant');
+                    if (!this.inputElement.hasAttribute('aria-describedby') && this.chipCollectionWrapper.id) {
+                        this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
+                    }
                 }
             }
             this.removeChipFocus();
@@ -2526,6 +2537,9 @@ var MultiSelect = /** @class */ (function (_super) {
             element.setAttribute('id', this.element.id + '_chip_item');
             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) {
@@ -2827,10 +2841,12 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.chipCollectionWrapper)) {
                 (this.chipCollectionWrapper.style.display = '');
             }
-            if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
+            if (this.mode === 'Delimiter' || (this.mode === 'CheckBox' && !this.isSelectAllClicked)) {
                 this.showDelimWrapper();
             }
-            this.showOverAllClear();
+            if (!this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
         }
         else {
             if (!isNullOrUndefined(this.chipCollectionWrapper)) {
@@ -2873,7 +2889,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 temp = this.getOverflowVal(this.value.length - 1);
                 data += temp;
                 temp = this.viewWrapper.innerHTML;
-                this.updateWrapperText(this.viewWrapper, data);
+                if (!this.isSelectAllClicked) {
+                    this.updateWrapperText(this.viewWrapper, data);
+                }
             }
             if (this.enableVirtualization && this.mode === 'CheckBox') {
                 var currentText = [];
@@ -4341,6 +4359,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.onMouseClick = function (e) {
         var _this = this;
+        this.isSelectAllClicked = false;
         if (!this.isClearAllItem) {
             this.keyCode = null;
             this.scrollFocusStatus = false;
@@ -4419,7 +4438,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     else {
                         e.preventDefault();
-                        if (this.value.length === this.listData.length && this.isPopupOpen()) {
+                        if (this.mode !== 'CheckBox' && this.hideSelectedItem && this.value.length === this.listData.length && this.isPopupOpen()) {
                             this.hidePopup(e);
                         }
                     }
@@ -4757,6 +4776,9 @@ var MultiSelect = /** @class */ (function (_super) {
             var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
             raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
+            if (this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
             this.renderReactTemplates();
             var remainSize = raminElement.offsetWidth;
             remove(raminElement);
@@ -5043,9 +5065,11 @@ var MultiSelect = /** @class */ (function (_super) {
             firstItems.forEach(function (node) {
                 fragment_1.appendChild(node.cloneNode(true));
             });
-            li.forEach(function (node) {
-                fragment_1.appendChild(node.cloneNode(true));
-            });
+            if ((this.totalItemCount >= (this.itemCount * 2) && this.dataSource instanceof DataManager)) {
+                li.forEach(function (node) {
+                    fragment_1.appendChild(node.cloneNode(true));
+                });
+            }
             var concatenatedNodeList = fragment_1.childNodes;
             if (this.virtualSelectAllData instanceof Array) {
                 while (index < length && index <= 50 && index < count) {
@@ -5078,9 +5102,22 @@ var MultiSelect = /** @class */ (function (_super) {
                     index++;
                 }
                 if (length > 50) {
+                    createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                    showSpinner(this.filterParent);
+                    if (this.popupObj && this.filterParent) {
+                        [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                        this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                        this.filterParent.style.cursor = 'progress';
+                    }
                     setTimeout(function () {
-                        if (_this.virtualSelectAllData && _this.virtualSelectAllData.length > 0) {
-                            _this.virtualSelectAllData.map(function (obj) {
+                        var dataArray = _this.virtualSelectAllData;
+                        var batchSize = 500;
+                        var currentIndex = 0;
+                        var processBatch = function () {
+                            var endIndex = Math.min(currentIndex + batchSize, dataArray.length);
+                            var batch = dataArray.slice(currentIndex, endIndex);
+                            // Use map on the batch
+                            batch.map(function (obj) {
                                 if (_this.value && obj[_this.fields.value] != null && Array.isArray(_this.value) &&
                                     ((!_this.allowObjectBinding && _this.value.indexOf(obj[_this.fields.value]) < 0) ||
                                         (_this.allowObjectBinding && !_this.isObjectInArray(obj[_this.fields.value], _this.value)))) {
@@ -5089,21 +5126,34 @@ var MultiSelect = /** @class */ (function (_super) {
                                     _this.dispatchSelect(value, event, null, false, length, obj, text);
                                 }
                             });
-                        }
-                        _this.updatedataValueItems(event);
-                        _this.isSelectAllLoop = false;
-                        if (!_this.changeOnBlur) {
-                            _this.updateValueState(event, _this.value, _this.tempValues);
-                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
-                        }
-                        _this.updateHiddenElement(true);
-                        if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
-                            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                            if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                li[index - 1].classList.remove('e-item-focus');
+                            currentIndex = endIndex;
+                            if (currentIndex < dataArray.length) {
+                                requestAnimationFrame(processBatch);
                             }
-                        }
-                        _this.checkSelectAll();
+                            else {
+                                _this.updatedataValueItems(event);
+                                _this.isSelectAllLoop = false;
+                                if (!_this.changeOnBlur) {
+                                    _this.updateValueState(event, _this.value, _this.tempValues);
+                                    _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                                }
+                                _this.updateHiddenElement(true);
+                                if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
+                                    var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                    if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                        li[index - 1].classList.remove('e-item-focus');
+                                    }
+                                }
+                                _this.checkSelectAll();
+                                hideSpinner(_this.filterParent);
+                                if (_this.popupObj && _this.filterParent) {
+                                    [_this.popupObj.element.querySelector('.e-content'), _this.popupObj.element.querySelector('.e-selectall-parent'), _this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                                    _this.filterParent.style.cursor = '';
+                                    _this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                                }
+                            }
+                        };
+                        processBatch();
                     }, 0);
                 }
                 else if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
@@ -5117,25 +5167,60 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                this.virtualSelectAllData.map(function (obj) {
-                    _this.virtualSelectAll = true;
-                    _this.removeValue(_this.value[index], event, _this.value.length - index);
-                });
-            }
-            this.updatedataValueItems(event);
-            if (!this.changeOnBlur) {
-                this.updateValueState(event, this.value, this.tempValues);
-                this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
-            }
-            this.updateHiddenElement();
-            this.setProperties({ value: [] }, true);
-            this.selectedListData = [];
-            this.virtualSelectAll = false;
-            if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
-                this.notify('setCurrentViewDataAsync', {
-                    component: this.getModuleName(),
-                    module: 'VirtualScroll'
-                });
+                var dataArray_1 = this.virtualSelectAllData;
+                var batchSize_1 = 500;
+                var currentIndex_1 = 0;
+                this.isProcessingVirtualSelectAll = true;
+                createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                showSpinner(this.filterParent);
+                if (this.popupObj && this.filterParent) {
+                    [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                    this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                    this.filterParent.style.cursor = 'progress';
+                }
+                var processBatch_1 = function () {
+                    var endIndex = Math.min(currentIndex_1 + batchSize_1, dataArray_1.length);
+                    var batch = dataArray_1.slice(currentIndex_1, endIndex);
+                    // Use map on the batch
+                    batch.map(function (obj) {
+                        _this.virtualSelectAll = true;
+                        // eslint-disable-next-line security/detect-object-injection
+                        _this.removeValue(_this.value[index], event, _this.value.length - index);
+                    });
+                    currentIndex_1 = endIndex;
+                    if (currentIndex_1 < dataArray_1.length) {
+                        requestAnimationFrame(processBatch_1);
+                    }
+                    else {
+                        // All batches completed
+                        _this.isProcessingVirtualSelectAll = false;
+                        hideSpinner(_this.filterParent);
+                        if (_this.popupObj && _this.filterParent) {
+                            [_this.popupObj.element.querySelector('.e-content'), _this.popupObj.element.querySelector('.e-selectall-parent'), _this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                            _this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                            _this.filterParent.style.cursor = '';
+                        }
+                        if (!_this.isSelectAllClicked) {
+                            _this.showOverAllClear();
+                        }
+                        _this.updatedataValueItems(event);
+                        if (!_this.changeOnBlur) {
+                            _this.updateValueState(event, _this.value, _this.tempValues);
+                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                        }
+                        _this.updateHiddenElement();
+                        _this.setProperties({ value: [] }, true);
+                        _this.selectedListData = [];
+                        _this.virtualSelectAll = false;
+                        if (!isNullOrUndefined(_this.viewPortInfo.startIndex) && !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
+                            _this.notify('setCurrentViewDataAsync', {
+                                component: _this.getModuleName(),
+                                module: 'VirtualScroll'
+                            });
+                        }
+                    }
+                };
+                processBatch_1();
             }
         }
         this.checkSelectAll();
@@ -5164,13 +5249,13 @@ var MultiSelect = /** @class */ (function (_super) {
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
         if ((li && li.length) || (this.enableVirtualization && !state)) {
-            var index_1 = 0;
-            var count_1 = 0;
+            var index = 0;
+            var count = 0;
             if (this.enableGroupCheckBox) {
-                count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
+                count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
             }
             else {
-                count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
+                count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
             }
             if (!beforeSelectArgs.preventSelectEvent) {
                 if (this.enableVirtualization) {
@@ -5185,42 +5270,73 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    while (index_1 < length && index_1 <= 50 && index_1 < count_1) {
-                        this.isSelectAllTarget = (length === index_1 + 1);
-                        this.updateListSelection(li[index_1], event, length - index_1);
+                    while (index < length && index <= 50 && index < count) {
+                        this.isSelectAllTarget = (length === index + 1);
+                        this.updateListSelection(li[index], event, length - index);
                         if (this.enableGroupCheckBox) {
-                            this.findGroupStart(li[index_1]);
+                            this.findGroupStart(li[index]);
                         }
-                        index_1++;
+                        index++;
                     }
                     if (length > 50) {
-                        setTimeout(function () {
-                            while (index_1 < length && index_1 < count_1) {
-                                _this.isSelectAllTarget = (length === index_1 + 1);
-                                _this.updateListSelection(li[index_1], event, length - index_1);
-                                if (_this.enableGroupCheckBox) {
-                                    _this.findGroupStart(li[index_1]);
+                        createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                        showSpinner(this.filterParent);
+                        if (this.popupObj && this.filterParent) {
+                            [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                            this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                            this.filterParent.style.cursor = 'progress';
+                        }
+                        this.isProcessingVirtualSelectAll = !this.isSelectAllClicked;
+                        var indexLocal_1 = index; // preserve original index value
+                        var maxIndex_1 = Math.min(length, count);
+                        // Use two-frame yield to ensure spinner paints before heavy work starts
+                        var CHUNK_SIZE_1 = 6;
+                        requestAnimationFrame(function () {
+                            requestAnimationFrame(function processFrame() {
+                                if (!this.list) {
+                                    return;
                                 }
-                                index_1++;
-                            }
-                            _this.updatedataValueItems(event);
-                            if (!_this.changeOnBlur) {
-                                _this.updateValueState(event, _this.value, _this.tempValues);
-                                _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
-                            }
-                            _this.updateHiddenElement();
-                            if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {
-                                var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                    li[index_1 - 1].classList.remove('e-item-focus');
+                                if (indexLocal_1 >= maxIndex_1) {
+                                    this.isProcessingVirtualSelectAll = !this.isProcessingVirtualSelectAll;
+                                    this.updatedataValueItems(event);
+                                    if (!this.changeOnBlur) {
+                                        this.updateValueState(event, this.value, this.tempValues);
+                                        this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                                    }
+                                    this.updateHiddenElement();
+                                    if (this.popupWrapper && li[indexLocal_1 - 1] && li[indexLocal_1 - 1].classList.contains('e-item-focus')) {
+                                        var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                        if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                            li[indexLocal_1 - 1].classList.remove('e-item-focus');
+                                        }
+                                    }
+                                    hideSpinner(this.filterParent);
+                                    if (this.popupObj && this.filterParent) {
+                                        [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                                        this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                                        this.filterParent.style.cursor = '';
+                                    }
+                                    return;
                                 }
-                            }
-                        }, 0);
+                                // process up to CHUNK_SIZE items this frame
+                                var processed = 0;
+                                while (processed < CHUNK_SIZE_1 && indexLocal_1 < maxIndex_1) {
+                                    this.isSelectAllTarget = (length === indexLocal_1 + 1);
+                                    this.updateListSelection(li[indexLocal_1], event, length - indexLocal_1);
+                                    if (this.enableGroupCheckBox) {
+                                        this.findGroupStart(li[indexLocal_1]);
+                                    }
+                                    indexLocal_1++;
+                                    processed++;
+                                }
+                                requestAnimationFrame(processFrame.bind(this));
+                            }.bind(_this));
+                        });
                     }
                 }
             }
             else {
-                for (var i = 0; i < li.length && i < count_1; i++) {
+                for (var i = 0; i < li.length && i < count; i++) {
                     this.removeHover();
                     var customVal = li[i].getAttribute('data-value');
                     var value = this.getFormattedValue(customVal);
@@ -5264,7 +5380,10 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.trigger('selectedAll', args);
             }
         }
-        this.updatedataValueItems(event);
+        if (!this.isProcessingVirtualSelectAll &&
+            ((!this.isSelectAllClicked) || (this.isSelectAllClicked && (this.enableVirtualization ? length > 30 : length <= 50)))) {
+            this.updatedataValueItems(event);
+        }
         this.checkPlaceholderSize();
         if (length <= 50 && !beforeSelectArgs.preventSelectEvent) {
             if (!this.changeOnBlur) {
@@ -5357,6 +5476,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.selectAllItems = function (state, event) {
         var _this = this;
+        this.isSelectAllClicked = state;
         if (isNullOrUndefined(this.list)) {
             this.selectAllAction = function () {
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
@@ -5850,7 +5970,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.renderItems(_this.mainData, _this.fields);
                     }
                     _this.virtualCustomData = null;
-                    _this.isVirtualTrackHeight = _this.totalItemCount >= (_this.itemCount * 2) ? false : true;
+                    _this.isVirtualTrackHeight = (_this.totalItemCount >= (_this.itemCount * 2) ||
+                        _this.dataSource instanceof DataManager) ? false : true;
                 }
             });
         }
@@ -6067,7 +6188,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER, attrs: { role: 'listbox' }
+                className: CHIP_WRAPPER
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {
@@ -6641,6 +6762,50 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {
             this.delimiterWrapper.parentElement.remove();
         }
+        if (this.hiddenElement) {
+            if (this.hiddenElement.onchange) {
+                this.hiddenElement.onchange = null;
+            }
+            this.hiddenElement.onchange = null;
+            this.hiddenElement.onclick = null;
+            this.hiddenElement.oninput = null;
+            var attrs = Array.prototype.slice.call(this.hiddenElement.attributes);
+            for (var n = 0; n < attrs.length; n++) {
+                this.hiddenElement.removeAttribute(attrs[n].name);
+            }
+            var children = this.hiddenElement.children;
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                child.onclick = null;
+                child.onchange = null;
+                child.textContent = '';
+                var attr = Array.prototype.slice.call(child.attributes);
+                for (var n = 0; n < attr.length; n++) {
+                    child.removeAttribute(attr[n].name);
+                }
+            }
+            var selectedElement = this.hiddenElement.querySelector('option');
+            if (selectedElement) {
+                selectedElement.removeAttribute('value');
+                selectedElement.removeAttribute('selected');
+                selectedElement.text = '';
+                selectedElement.innerHTML = '';
+                selectedElement = null;
+            }
+            while (this.hiddenElement.firstChild) {
+                this.hiddenElement.removeChild(this.hiddenElement.firstChild);
+            }
+            if (this.hiddenElement.attributes) {
+                var attr = Array.prototype.slice.call(this.hiddenElement.attributes);
+                for (var n = 0; n < attr.length; n++) {
+                    this.hiddenElement.removeAttribute(attr[n].name);
+                }
+            }
+            if (this.hiddenElement.parentNode) {
+                this.hiddenElement.parentNode.removeChild(this.hiddenElement);
+            }
+            this.hiddenElement.innerHTML = '';
+        }
         // Remove the select element if it exists
         var selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
         if (selectElement && selectElement.parentElement) {
@@ -6660,7 +6825,7 @@ var MultiSelect = /** @class */ (function (_super) {
             var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
                 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
                 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',
-                'aria-describedby', 'size', 'role', 'type', 'class'];
+                'aria-describedby', 'size', 'role', 'type', 'class', 'aria-activedescendant'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }

package/styles/bds-lite.css

@@ -21,11 +21,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -56,11 +58,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -121,11 +125,11 @@
 
 .e-mention.e-popup {
   background: var(--color-sf-bg-primary);
-  border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
           box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
   margin-top: 2px;
   position: absolute;
+  border: 0;
 }
 
 .e-mention.e-popup .e-dropdownbase {
@@ -220,11 +224,13 @@
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */
@@ -1541,11 +1547,13 @@ ejs-dropdownlist {
 }
 
 .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 8px 0 0;
+  -webkit-padding-end: 8px;
+          padding-inline-end: 8px;
 }
 
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 4px 0 0;
+  -webkit-padding-end: 4px;
+          padding-inline-end: 4px;
 }
 
 /* stylelint-disable */