@syncfusion/ej2-dropdowns 20.3.59 → 20.4.38

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

@@ -144,7 +144,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 var htmlAttr = _a[_i];
                 switch (htmlAttr) {
                     case 'class': {
-                        var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.overAllWrapper], updatedClassValue.split(' '));
                             addClass([this.popupWrapper], updatedClassValue.split(' '));
@@ -156,7 +156,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         break;
                     case 'placeholder':
                         if (!this.placeholder) {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                             this.setProperties({ placeholder: this.inputElement.placeholder }, true);
                             this.refreshPlaceHolder();
                         }
@@ -166,16 +166,16 @@ var MultiSelect = /** @class */ (function (_super) {
                         var validateAttr = ['name', 'required', 'aria-required', 'form'];
                         var containerAttr = ['title', 'role', 'style', 'class'];
                         if (defaultAttr.indexOf(htmlAttr) > -1) {
-                            this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.element.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                         else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
-                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                         else if (containerAttr.indexOf(htmlAttr) > -1) {
-                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
-                        else if (htmlAttr !== 'size') {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        else if (htmlAttr !== 'size' && !isNullOrUndefined(this.inputElement)) {
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                         break;
                     }
@@ -184,11 +184,13 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateReadonly = function (state) {
-        if (state || this.mode === 'CheckBox') {
-            this.inputElement.setAttribute('readonly', 'true');
-        }
-        else {
-            this.inputElement.removeAttribute('readonly');
+        if (!isNullOrUndefined(this.inputElement)) {
+            if (state || this.mode === 'CheckBox') {
+                this.inputElement.setAttribute('readonly', 'true');
+            }
+            else {
+                this.inputElement.removeAttribute('readonly');
+            }
         }
     };
     MultiSelect.prototype.updateClearButton = function (state) {
@@ -331,8 +333,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.ulElement)) {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
-        var disableStatus = (this.inputElement.disabled) ? true : false;
-        if (!this.isPopupOpen()) {
+        var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
+        if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
             attributes(this.inputElement, this.getAriaAttributes());
         }
         if (disableStatus) {
@@ -442,7 +444,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.checkForCustomValue(this.tempQuery, this.fields);
             return;
         }
-        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||
+        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
             this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
             this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
             this.refreshSelection();
@@ -512,8 +514,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     element.setAttribute('aria-selected', 'true');
                     if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
-                        var ariaValue = element.firstElementChild.getAttribute('aria-checked');
-                        if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {
+                        var ariaValue = element.getElementsByClassName('e-check').length;
+                        if (ariaValue === 0) {
                             var args = {
                                 module: 'CheckBoxSelection',
                                 enable: this.mode === 'CheckBox',
@@ -637,9 +639,9 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      */
     MultiSelect.prototype.filter = function (dataSource, query, fields) {
@@ -906,11 +908,13 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.refreshInputHight = function () {
-        if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
-            this.searchWrapper.classList.remove(ZERO_SIZE);
-        }
-        else {
-            this.searchWrapper.classList.add(ZERO_SIZE);
+        if (!isNullOrUndefined(this.searchWrapper)) {
+            if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
+                this.searchWrapper.classList.remove(ZERO_SIZE);
+            }
+            else {
+                this.searchWrapper.classList.add(ZERO_SIZE);
+            }
         }
     };
     MultiSelect.prototype.validateValues = function (newValue, oldValue) {
@@ -1711,7 +1715,6 @@ var MultiSelect = /** @class */ (function (_super) {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -1721,7 +1724,6 @@ var MultiSelect = /** @class */ (function (_super) {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'true');
                         addClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -1982,109 +1984,111 @@ var MultiSelect = /** @class */ (function (_super) {
             _super.prototype.render.call(this);
         }
         if (!this.popupObj) {
-            document.body.appendChild(this.popupWrapper);
-            var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
-            if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
-                checkboxFilter.remove();
-                this.filterParent = null;
-            }
-            var overAllHeight = parseInt(this.popupHeight, 10);
-            this.popupWrapper.style.visibility = 'hidden';
-            if (this.headerTemplate) {
-                this.setHeaderTemplate();
-                overAllHeight -= this.header.offsetHeight;
-            }
-            append([this.list], this.popupWrapper);
-            if (this.footerTemplate) {
-                this.setFooterTemplate();
-                overAllHeight -= this.footer.offsetHeight;
-            }
-            if (this.mode === 'CheckBox' && this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight -= this.selectAllHeight;
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-                if (this.headerTemplate && this.header) {
+            if (!isNullOrUndefined(this.popupWrapper)) {
+                document.body.appendChild(this.popupWrapper);
+                var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
+                if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
+                    checkboxFilter.remove();
+                    this.filterParent = null;
+                }
+                var overAllHeight = parseInt(this.popupHeight, 10);
+                this.popupWrapper.style.visibility = 'hidden';
+                if (this.headerTemplate) {
+                    this.setHeaderTemplate();
                     overAllHeight -= this.header.offsetHeight;
                 }
-                if (this.footerTemplate && this.footer) {
+                append([this.list], this.popupWrapper);
+                if (this.footerTemplate) {
+                    this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
                 }
-            }
-            if (this.mode === 'CheckBox') {
-                var args = {
-                    module: 'CheckBoxSelection',
-                    enable: this.mode === 'CheckBox',
-                    popupElement: this.popupWrapper
-                };
-                if (this.allowFiltering) {
-                    this.notify('searchBox', args);
-                    overAllHeight -= this.searchBoxHeight;
+                if (this.mode === 'CheckBox' && this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight -= this.selectAllHeight;
                 }
-                addClass([this.popupWrapper], 'e-checkbox');
-            }
-            if (this.popupHeight !== 'auto') {
-                this.list.style.maxHeight = formatUnit(overAllHeight);
-                this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            else {
-                this.list.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            this.popupObj = new Popup(this.popupWrapper, {
-                width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
-                relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
-                enableRtl: this.enableRtl, zIndex: this.zIndex,
-                close: function () {
-                    if (_this.popupObj.element.parentElement) {
-                        _this.popupObj.unwireScrollEvents();
-                        // For restrict the page scrolling in safari browser
-                        var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);
-                        if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
-                            checkboxFilterInput.blur();
-                        }
-                        detach(_this.popupObj.element);
-                    }
-                },
-                open: function () {
-                    _this.popupObj.resolveCollision();
-                    if (!_this.isFirstClick) {
-                        var ulElement = _this.list.querySelector('ul');
-                        if (ulElement) {
-                            if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                                _this.targetElement().trim() !== '')) {
-                                _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
-                            }
-                        }
-                        _this.isFirstClick = true;
+                else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                }
+                else if (this.mode === 'CheckBox' && !this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                    if (this.headerTemplate && this.header) {
+                        overAllHeight -= this.header.offsetHeight;
                     }
-                    _this.popupObj.wireScrollEvents();
-                    if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                        _this.targetElement().trim() !== '')) {
-                        _this.loadTemplate();
+                    if (this.footerTemplate && this.footer) {
+                        overAllHeight -= this.footer.offsetHeight;
                     }
-                    _this.setScrollPosition();
-                    if (_this.allowFiltering) {
-                        _this.notify('inputFocus', {
-                            module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
-                        });
+                }
+                if (this.mode === 'CheckBox') {
+                    var args = {
+                        module: 'CheckBoxSelection',
+                        enable: this.mode === 'CheckBox',
+                        popupElement: this.popupWrapper
+                    };
+                    if (this.allowFiltering) {
+                        this.notify('searchBox', args);
+                        overAllHeight -= this.searchBoxHeight;
                     }
-                }, targetExitViewport: function () {
-                    if (!Browser.isDevice) {
-                        _this.hidePopup();
+                    addClass([this.popupWrapper], 'e-checkbox');
+                }
+                if (this.popupHeight !== 'auto') {
+                    this.list.style.maxHeight = formatUnit(overAllHeight);
+                    this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                else {
+                    this.list.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                this.popupObj = new Popup(this.popupWrapper, {
+                    width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
+                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    enableRtl: this.enableRtl, zIndex: this.zIndex,
+                    close: function () {
+                        if (_this.popupObj.element.parentElement) {
+                            _this.popupObj.unwireScrollEvents();
+                            // For restrict the page scrolling in safari browser
+                            var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);
+                            if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
+                                checkboxFilterInput.blur();
+                            }
+                            detach(_this.popupObj.element);
+                        }
+                    },
+                    open: function () {
+                        _this.popupObj.resolveCollision();
+                        if (!_this.isFirstClick) {
+                            var ulElement = _this.list.querySelector('ul');
+                            if (ulElement) {
+                                if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                                    _this.targetElement().trim() !== '')) {
+                                    _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
+                                }
+                            }
+                            _this.isFirstClick = true;
+                        }
+                        _this.popupObj.wireScrollEvents();
+                        if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                            _this.targetElement().trim() !== '')) {
+                            _this.loadTemplate();
+                        }
+                        _this.setScrollPosition();
+                        if (_this.allowFiltering) {
+                            _this.notify('inputFocus', {
+                                module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
+                            });
+                        }
+                    }, targetExitViewport: function () {
+                        if (!Browser.isDevice) {
+                            _this.hidePopup();
+                        }
                     }
+                });
+                if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
+                    this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
-            });
-            if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
-                this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                this.popupObj.close();
+                this.popupWrapper.style.visibility = '';
             }
-            this.popupObj.close();
-            this.popupWrapper.style.visibility = '';
         }
     };
     MultiSelect.prototype.setHeaderTemplate = function () {
@@ -2347,7 +2351,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var temp;
         var tempData = this.listData;
         this.listData = this.mainData;
-        this.hiddenElement.innerHTML = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
         if (!isNullOrUndefined(this.value)) {
             for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
                 var listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);
@@ -2365,7 +2371,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     data += temp + delimiterChar + ' ';
                     text.push(temp);
                 }
-                this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                }
             }
         }
         this.setProperties({ text: text.toString() }, true);
@@ -2577,10 +2585,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     selectItems[temp1 - 1].setAttribute('aria-selected', 'false');
                     if (this.mode === 'CheckBox') {
                         if (selectedItems && (selectedItems.length > (temp1 - 1))) {
-                            selectedItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                             removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                         }
-                        selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                     }
                     temp1--;
@@ -2638,9 +2644,9 @@ var MultiSelect = /** @class */ (function (_super) {
             addClass([element], className);
             this.updateMainList(false, element.getAttribute('data-value'), mainElement);
             element.setAttribute('aria-selected', 'true');
-            if (this.mode === 'CheckBox') {
-                var ariaCheck = element.firstElementChild.getAttribute('aria-checked');
-                if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {
+            if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
+                var ariaCheck = element.getElementsByClassName('e-check').length;
+                if (ariaCheck === 0) {
                     this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });
                 }
             }
@@ -2959,9 +2965,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.chipCollectionWrapper) {
             this.chipCollectionWrapper.style.display = 'none';
         }
-        this.viewWrapper.style.display = '';
-        this.viewWrapper.style.width = '';
-        this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
+        if (!isNullOrUndefined(this.viewWrapper)) {
+            this.viewWrapper.style.display = '';
+            this.viewWrapper.style.width = '';
+            this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
+        }
         if (this.value && this.value.length) {
             var data = '';
             var temp = void 0;
@@ -3049,8 +3057,10 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         else {
-            this.viewWrapper.innerHTML = '';
-            this.viewWrapper.style.display = 'none';
+            if (!isNullOrUndefined(this.viewWrapper)) {
+                this.viewWrapper.innerHTML = '';
+                this.viewWrapper.style.display = 'none';
+            }
         }
     };
     MultiSelect.prototype.checkClearIconWidth = function () {
@@ -3123,29 +3133,41 @@ var MultiSelect = /** @class */ (function (_super) {
         return temp;
     };
     MultiSelect.prototype.unWireEvent = function () {
-        EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        }
         EventHandler.remove(window, 'resize', this.windowResize);
-        EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
-        EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
-        if (this.mode !== 'CheckBox') {
-            EventHandler.remove(this.inputElement, 'input', this.onInput);
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
+            EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
+            if (this.mode !== 'CheckBox') {
+                EventHandler.remove(this.inputElement, 'input', this.onInput);
+            }
+            EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
+            var formElement = closest(this.inputElement, 'form');
+            if (formElement) {
+                EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+            }
+            EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
         }
-        EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
-        var formElement = closest(this.inputElement, 'form');
-        if (formElement) {
-            EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
+            EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
+        }
+        if (!isNullOrUndefined(this.overAllClear)) {
+            EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
+        }
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
-        EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
-        EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
-        EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
-        EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
-        EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
     };
     MultiSelect.prototype.selectAllItem = function (state, event, list) {
         var li;
-        li = this.list.querySelectorAll(state ?
-            'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
-            'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        if (!isNullOrUndefined(this.list)) {
+            li = this.list.querySelectorAll(state ?
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        }
         if (this.value && this.value.length && event && event.target
             && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
@@ -3647,7 +3669,7 @@ var MultiSelect = /** @class */ (function (_super) {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */
@@ -3958,11 +3980,13 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.addValidInputClass = function () {
-        if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
-            addClass([this.overAllWrapper], 'e-valid-input');
-        }
-        else {
-            removeClass([this.overAllWrapper], 'e-valid-input');
+        if (!isNullOrUndefined(this.overAllWrapper)) {
+            if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
+                addClass([this.overAllWrapper], 'e-valid-input');
+            }
+            else {
+                removeClass([this.overAllWrapper], 'e-valid-input');
+            }
         }
     };
     MultiSelect.prototype.dropDownIcon = function () {
@@ -4015,13 +4039,17 @@ var MultiSelect = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         var temp = ['readonly', 'aria-disabled', 'placeholder'];
         var length = temp.length;
-        while (length > 0) {
-            this.inputElement.removeAttribute(temp[length - 1]);
-            length--;
+        if (!isNullOrUndefined(this.inputElement)) {
+            while (length > 0) {
+                this.inputElement.removeAttribute(temp[length - 1]);
+                length--;
+            }
+        }
+        if (!isNullOrUndefined(this.element)) {
+            this.element.removeAttribute('data-initial-value');
+            this.element.style.display = 'block';
         }
-        this.element.removeAttribute('data-initial-value');
-        this.element.style.display = 'block';
-        if (this.overAllWrapper.parentElement) {
+        if (this.overAllWrapper && this.overAllWrapper.parentElement) {
             if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {
                 remove(this.overAllWrapper);
             }
@@ -4030,6 +4058,25 @@ var MultiSelect = /** @class */ (function (_super) {
                 remove(this.overAllWrapper);
             }
         }
+        this.componentWrapper = null;
+        this.overAllClear = null;
+        this.overAllWrapper = null;
+        this.hiddenElement = null;
+        this.searchWrapper = null;
+        this.viewWrapper = null;
+        this.chipCollectionWrapper = null;
+        this.targetInputElement = null;
+        this.popupWrapper = null;
+        this.inputElement = null;
+        this.delimiterWrapper = null;
+        this.popupObj = null;
+        this.popupWrapper = null;
+        this.liCollections = null;
+        this.header = null;
+        this.mainList = null;
+        this.mainListCollection = null;
+        this.footer = null;
+        this.selectAllEventEle = null;
     };
     __decorate([
         Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)

package/styles/bootstrap5-dark.css

@@ -988,10 +988,10 @@ ejs-dropdownlist {
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check) {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: #212529;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check) {
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {

package/styles/bootstrap5.css

@@ -988,10 +988,10 @@ ejs-dropdownlist {
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check) {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: #fff;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check) {
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {

package/styles/drop-down-base/_bootstrap-dark-definition.scss

@@ -20,6 +20,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
 $mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;

package/styles/drop-down-base/_bootstrap-definition.scss

@@ -19,6 +19,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-light-font !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
 $mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;

package/styles/drop-down-base/_bootstrap4-definition.scss

@@ -16,6 +16,7 @@ $ddl-list-header-bg-color: $white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-default-font-color: $gray-900 !default;
 $ddl-list-active-border-color: $white !default;
+$mention-popup-bg-color: $white !default;
 $ddl-list-active-font-color: $primary-font !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $primary !default;

package/styles/drop-down-base/_bootstrap5-definition.scss

@@ -56,6 +56,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;

package/styles/drop-down-base/_fabric-dark-definition.scss

@@ -22,6 +22,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: $neutral-light-font !default;
 $ddl-list-active-border-color: $neutral-quintenary !default;
+$mention-popup-bg-color: $neutral-quintenary !default;
 $ddl-list-active-font-color: $neutral-light-font !default;
 $mention-active-font-color: $theme-primary !default;
 $ddl-list-active-bg-color: $neutral-quintenary !default;

package/styles/drop-down-base/_fabric-definition.scss

@@ -21,6 +21,7 @@ $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: rgba($neutral-light-font, .87) !default;
 $ddl-list-active-border-color: $neutral-white !default;
+$mention-popup-bg-color: $neutral-white !default;
 $ddl-list-active-font-color: $neutral-light-font !default;
 $mention-active-font-color: $theme-primary !default;
 $ddl-list-active-bg-color: $theme-lighter !default;

package/styles/drop-down-base/_fluent-definition.scss

@@ -58,6 +58,7 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $flyout-text-color !default;
 $ddl-list-default-font-color: $flyout-text-color !default;
 $ddl-list-active-border-color: $flyout-bg-color !default;
+$mention-popup-bg-color: $flyout-bg-color !default;
 $ddl-list-active-font-color: $content-text-color !default;
 $mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $flyout-bg-color-selected !default;