@syncfusion/ej2-dropdowns 32.2.8 → 33.1.44

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);
@@ -2289,7 +2297,10 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else {
-                this.onActionComplete(list, this.mainData);
+                var listUl = this.list && this.list.querySelector('ul');
+                var 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) {
@@ -2521,9 +2532,13 @@ var MultiSelect = /** @class */ (function (_super) {
         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);
             }
+            var chipClose = element.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);
+            if (chipClose) {
+                chipClose.removeAttribute('aria-hidden');
+            }
         }
         this.trigger('chipSelection', e);
     };
@@ -2820,10 +2835,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)) {
@@ -2866,7 +2883,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 = [];
@@ -2927,6 +2946,7 @@ var MultiSelect = /** @class */ (function (_super) {
         var _this = this;
         var list = this.listData;
         if (this.initStatus && !isNotTrigger && (!this.allowObjectBinding || (this.allowObjectBinding && value))) {
+            var selectAllArgsLocal_1 = null;
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             var val_2 = dataValue ? dataValue : this.getDataByValue(value);
             var eventArgs = {
@@ -2943,15 +2963,13 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.selectAllEventEle.push(element);
                     }
                     if (length === 1) {
-                        var args = {
+                        selectAllArgsLocal_1 = {
                             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;
@@ -2988,6 +3006,10 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox') {
                         _super.prototype.scrollStop.call(_this);
                     }
+                    if (selectAllArgsLocal_1) {
+                        _this.trigger('selectedAll', selectAllArgsLocal_1);
+                        _this.selectAllEventData = [];
+                    }
                 }
             });
         }
@@ -3000,12 +3022,18 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.removeChipFocus = function () {
         var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP + '.' + CHIP_SELECTED);
         removeClass(elements, CHIP_SELECTED);
+        var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);
         if (Browser.isDevice) {
-            var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);
             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);
@@ -3046,7 +3074,7 @@ var MultiSelect = /** @class */ (function (_super) {
         });
         var compiledString;
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
-        var chipClose = this.createElement('span', { className: CHIP_CLOSE });
+        var chipClose = this.createElement('span', { className: CHIP_CLOSE, attrs: { 'aria-label': 'delete', 'aria-hidden': 'true', 'tabindex': '-1' } });
         if (this.mainData) {
             itemData = this.getDataByValue(value);
         }
@@ -4325,6 +4353,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;
@@ -4403,6 +4432,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     else {
                         e.preventDefault();
+                        if (this.mode !== 'CheckBox' && this.hideSelectedItem && this.value.length === this.listData.length && this.isPopupOpen()) {
+                            this.hidePopup(e);
+                        }
                     }
                     var isFilterData = this.targetElement().trim() !== '' ? true : false;
                     this.makeTextBoxEmpty();
@@ -4738,6 +4770,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);
@@ -5059,9 +5094,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)))) {
@@ -5070,21 +5118,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) {
@@ -5098,25 +5159,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();
@@ -5145,13 +5241,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) {
@@ -5166,42 +5262,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);
@@ -5245,7 +5372,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) {
@@ -5338,6 +5468,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) {
@@ -6048,7 +6179,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER
+                className: CHIP_WRAPPER, attrs: { role: 'listbox' }
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {
@@ -6622,6 +6753,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) {
@@ -6641,7 +6816,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 */