@syncfusion/ej2-dropdowns 26.2.11 → 27.1.48

package/src/list-box/list-box.js

@@ -429,11 +429,12 @@ var ListBox = /** @class */ (function (_super) {
             }
             if (this.allowFiltering) {
                 filterElem = this.list.getElementsByClassName('e-input-filter')[0];
+                if (isNullOrUndefined(filterElem)) {
+                    return;
+                }
                 filterElem.selectionStart = txtLength;
                 filterElem.selectionEnd = txtLength;
-                if (filterElem.value !== '') {
-                    filterElem.focus();
-                }
+                filterElem.focus();
             }
         }
         if (this.toolbarSettings.items.length && this.scope && this.scope.indexOf('#') > -1 && !isNullOrUndefined(e)) {
@@ -543,7 +544,7 @@ var ListBox = /** @class */ (function (_super) {
         }
         extend(items, args.items);
         this.trigger('beforeDrop', args);
-        if (args.items !== items) {
+        if (JSON.stringify(args.items) !== JSON.stringify(items)) {
             this.customDraggedItem = args.items;
         }
     };
@@ -878,36 +879,47 @@ var ListBox = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ListBox.prototype.removeItem = function (items, itemIndex) {
+        var _this = this;
         var liCollections = [];
         var liElement = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
         if (items) {
             items = (items instanceof Array ? items : [items]);
             var fields = this.fields;
             var dataValue = void 0;
-            var objValue = {};
+            var objValue = void 0;
             var dupData = [];
+            var itemIdx = void 0;
             extend(dupData, [], this.jsonData);
             var removeIdxes = [];
             var removeLiIdxes = [];
-            for (var i = 0; i < dupData.length; i++) {
-                var value = (dupData[i] instanceof Object) ? dupData[i][fields.value] : dupData[i].toString();
-                objValue[value] = i;
-            }
             for (var j = 0; j < items.length; j++) {
-                dataValue = (items[j] instanceof Object) ? items[j][fields.value] : items[j].toString();
-                if (objValue.hasOwnProperty(dataValue)) {
-                    var idx = objValue[dataValue];
-                    liCollections.push(liElement[idx]);
-                    removeIdxes.push(idx);
-                    removeLiIdxes.push(idx);
+                if (items[j] instanceof Object) {
+                    dataValue = getValue(fields.value, items[j]);
+                }
+                else {
+                    dataValue = items[j].toString();
+                }
+                for (var i = 0, len = dupData.length; i < len; i++) {
+                    if (dupData[i] instanceof Object) {
+                        objValue = getValue(fields.value, dupData[i]);
+                    }
+                    else {
+                        objValue = dupData[i].toString();
+                    }
+                    if (objValue === dataValue) {
+                        itemIdx = this.getIndexByValue(dataValue);
+                        var idx = itemIdx === i ? itemIdx : i;
+                        liCollections.push(liElement[idx]);
+                        removeIdxes.push(idx);
+                        removeLiIdxes.push(idx);
+                    }
                 }
             }
-            for (var k = removeIdxes.length - 1; k >= 0; k--) {
-                this.listData.splice(removeIdxes[k], 1);
-            }
-            for (var k = removeIdxes.length - 1; k >= 0; k--) {
-                this.jsonData.splice(removeIdxes[k], 1);
-            }
+            var validRemoveIdxes = removeIdxes.sort(function (a, b) { return b - a; });
+            validRemoveIdxes.forEach(function (idx) {
+                _this.listData.splice(idx, 1);
+                _this.jsonData.splice(idx, 1);
+            });
             for (var k = removeLiIdxes.length - 1; k >= 0; k--) {
                 this.updateLiCollection(removeLiIdxes[k]);
             }
@@ -1005,6 +1017,7 @@ var ListBox = /** @class */ (function (_super) {
      * @returns {void}
      */
     ListBox.prototype.moveAllTo = function (targetId, index) {
+        this.toolbarAction = 'moveAllTo';
         if (this.listData.length > 0) {
             var tlistbox = (targetId) ? getComponent(targetId, ListBox_1) : this.getScopedListBox();
             this.moveAllData(this, tlistbox, false, index);
@@ -1551,6 +1564,7 @@ var ListBox = /** @class */ (function (_super) {
                     var item = _a[_i];
                     if (!isNullOrUndefined(item)) {
                         var key = fListBox.getFormattedValue(getValue((fListBox.fields.value ? fListBox.fields.value : 'value'), item));
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         listDataMap_1[key] = item;
                     }
                 }
@@ -1717,24 +1731,33 @@ var ListBox = /** @class */ (function (_super) {
             var childNode = childNodes[i];
             if (childNode.classList.contains('e-disabled')) {
                 tempLiColl.push(childNode);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                tempData.push(fListBox.listData[i]);
+                if (this.sortOrder != null) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    tempData.push(fListBox.sortedData[i]);
+                }
+                else {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    tempData.push(fListBox.listData[i]);
+                }
             }
             else {
                 newFlistboxArray.push(i);
             }
         }
         flistboxarray = newFlistboxArray;
-        if (!isRefresh) {
-            moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);
-            fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
-        }
+        moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);
+        this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         if (isKey) {
             this.list.focus();
         }
         index = (index) ? index : listData.length;
         for (var i = 0; i < flistboxarray.length; i++) {
-            listData.splice(index + i, 0, fListBox.listData[flistboxarray[i]]);
+            if (this.sortOrder != null) {
+                listData.splice(index + i, 0, fListBox.sortedData[flistboxarray[i]]);
+            }
+            else {
+                listData.splice(index + i, 0, fListBox.listData[flistboxarray[i]]);
+            }
         }
         for (var i = 0; i < flistboxarray.length; i++) {
             jsonData.splice(index + i, 0, fListBox.jsonData[flistboxarray[i]]);
@@ -1772,6 +1795,17 @@ var ListBox = /** @class */ (function (_super) {
             fListBox.listData = fListBox.sortedData = fListBox.jsonData = tempData;
         }
         else if (fListBox.allowFiltering) {
+            if (tempLiColl.length > 0) {
+                var disabledData_1 = [];
+                for (var i = 0; i < tempLiColl.length; i++) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    disabledData_1.push(this.getDataByValue(tempLiColl[i].getAttribute('data-value')));
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                fListBox.listData = fListBox.listData.filter(function (obj1) {
+                    return !disabledData_1.some(function (obj2) { return obj1 === obj2; });
+                });
+            }
             for (var i = 0; i < fListBox.listData.length; i++) {
                 for (var j = 0; j < fListBox.jsonData.length; j++) {
                     if (fListBox.listData[i] === fListBox.jsonData[j]) {
@@ -1783,8 +1817,9 @@ var ListBox = /** @class */ (function (_super) {
         }
         if (isRefresh) {
             var sourceElem = tListBox.renderItems(listData, tListBox.fields);
-            tListBox.updateListItems(sourceElem, tListBox.ulElement);
-            fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
+            if (!this.itemTemplate) {
+                tListBox.updateListItems(sourceElem, tListBox.ulElement);
+            }
         }
         else {
             tListBox.sortedData = listData;
@@ -1795,7 +1830,7 @@ var ListBox = /** @class */ (function (_super) {
             var btn = wrap.querySelector('[data-value="' + this.toolbarAction + '"]');
             btn.disabled = true;
         }
-        if (fListBox.listData.length === 0) {
+        if (fListBox.listData.length === 0 && tempLiColl.length === 0) {
             fListBox.l10nUpdate();
         }
     };
@@ -2044,12 +2079,12 @@ var ListBox = /** @class */ (function (_super) {
     };
     ListBox.prototype.targetElement = function () {
         this.targetInputElement = this.list.getElementsByClassName('e-input-filter')[0];
-        return this.targetInputElement.value;
+        return isNullOrUndefined(this.targetInputElement) ? null : this.targetInputElement.value;
     };
     ListBox.prototype.dataUpdater = function (dataSource, query, fields) {
         this.isDataFetched = false;
         var backCommand = true;
-        if (this.targetElement().trim() === '') {
+        if (this.targetElement() && this.targetElement().trim() === '') {
             var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
             if (backCommand) {
                 this.remoteCustomValue = false;
@@ -2207,6 +2242,9 @@ var ListBox = /** @class */ (function (_super) {
     ListBox.prototype.updateSelectTag = function () {
         var ele = this.getSelectTag();
         var innerHTML = '';
+        if (isNullOrUndefined(ele)) {
+            return;
+        }
         ele.innerHTML = '';
         if (this.value) {
             for (var i = 0, len = this.value.length; i < len; i++) {
@@ -2419,9 +2457,7 @@ var ListBox = /** @class */ (function (_super) {
                         this.initDraggable();
                     }
                     else {
-                        if (this.ulElement.classList.contains("e-sortable")) {
-                            getComponent(this.ulElement, 'sortable').destroy();
-                        }
+                        getComponent(this.ulElement, 'sortable').destroy();
                     }
                     break;
                 case 'allowFiltering':

package/src/mention/mention.d.ts

@@ -448,6 +448,14 @@ export declare class Mention extends DropDownBase {
      * @returns {void}
      */
     search(text: string, positionX: number, positionY: number): void;
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    disableItem(item: string | number | object | HTMLLIElement): void;
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

package/src/mention/mention.js

@@ -48,7 +48,6 @@ var Mention = /** @class */ (function (_super) {
      * @private
      * @returns {void}
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Mention.prototype.onPropertyChanged = function (newProp, oldProp) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -350,7 +349,7 @@ var Mention = /** @class */ (function (_super) {
         }
         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) {
+        if (document.activeElement !== this.inputElement && !isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -361,12 +360,12 @@ var Mention = /** @class */ (function (_super) {
         var lastWordRange = this.getLastLetter(currentRange);
         var lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
         // eslint-disable-next-line security/detect-non-literal-regexp
-        var Regex = new RegExp(this.mentionChar.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
+        var Regex = new RegExp(this.mentionChar.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
         var charRegex = new RegExp('[a-zA-Z]', 'g');
         if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
             return;
         }
-        if (this.beforePopupOpen && this.isPopupOpen && lastWordRange == lastTwoLetters) {
+        if (this.beforePopupOpen && this.isPopupOpen && lastWordRange === lastTwoLetters) {
             this.hidePopup();
             return;
         }
@@ -398,7 +397,8 @@ var Mention = /** @class */ (function (_super) {
                 if (!this.isContentEditable(this.inputElement)) {
                     this.showPopup();
                 }
-                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement && e.keyCode !== 9) {
+                else if (this.isContentEditable(this.inputElement) && this.range &&
+                    this.range.startContainer !== this.inputElement && e.keyCode !== 9) {
                     this.showPopup();
                 }
             }
@@ -423,7 +423,8 @@ var Mention = /** @class */ (function (_super) {
             }
         }
         else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&
-            e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) || (this.liCollections && this.liCollections.length > 0))) {
+            e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) ||
+            (this.liCollections && this.liCollections.length > 0))) {
             this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
             this.searchLists(e);
         }
@@ -504,6 +505,10 @@ var Mention = /** @class */ (function (_super) {
         if (this.isActive) {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.inputElement.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+                var isRTESlashMenuPopup = this.isRTE && this.cssClass && this.cssClass.indexOf('e-slash-menu') > -1;
+                if (isRTESlashMenuPopup) {
+                    ulElement.id = this.inputElement.id + '_slash_menu_options';
+                }
             }
             var focusItem = this.fields.disabled ? ulElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled)') : ulElement.querySelector('.' + dropDownBaseClasses.li);
             if (focusItem) {
@@ -632,7 +637,7 @@ var Mention = /** @class */ (function (_super) {
         if (isNullOrUndefined(text)) {
             return '';
         }
-        var textValue = text.replace(/\u00A0/g, ' ');
+        var textValue = text.indexOf('\u200B') > -1 ? text.replace(/\u200B/g, '').replace(/\u00A0/g, ' ') : text.replace(/\u00A0/g, ' ');
         var words = textValue.split(/\s+/);
         var wordCnt = words.length - 1;
         return words[wordCnt].trim();
@@ -647,7 +652,7 @@ var Mention = /** @class */ (function (_super) {
      */
     Mention.prototype.showPopup = function () {
         this.beforePopupOpen = true;
-        if (document.activeElement != this.inputElement) {
+        if (document.activeElement !== this.inputElement) {
             this.inputElement.focus();
         }
         this.queryString = this.didPopupOpenByTypingInitialChar ? this.queryString : '';
@@ -721,8 +726,14 @@ var Mention = /** @class */ (function (_super) {
                         addClass([popupEle_1], _this.cssClass.split(' '));
                     }
                 }
-                if (!isNullOrUndefined(_this.target)) {
-                    popupEle_1.id = _this.inputElement.id + '_popup';
+                var isRTESlashMenuPopup = _this.isRTE && _this.cssClass && _this.cssClass.indexOf('e-slash-menu') > -1;
+                if (isRTESlashMenuPopup) {
+                    popupEle_1.id = _this.inputElement.id + '_slash_menu_popup';
+                }
+                else {
+                    if (!isNullOrUndefined(_this.target)) {
+                        popupEle_1.id = _this.inputElement.id + '_popup';
+                    }
                 }
                 _this.listHeight = formatUnit(_this.popupHeight);
                 if (!isNullOrUndefined(_this.list.querySelector('li')) && !_this.initRemoteRender) {
@@ -788,15 +799,15 @@ var Mention = /** @class */ (function (_super) {
                             }
                             else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') === -1) {
                                 popupEle_1.style.left = formatUnit(coordinates_1.left);
-                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString()));
+                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString(), 10));
                             }
                             else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') > -1) {
                                 popupEle_1.style.left = formatUnit(popupLeft_1);
-                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString()));
+                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString(), 10));
                             }
                             else {
                                 popupEle_1.style.left = formatUnit(coordinates_1.left);
-                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString()));
+                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString(), 10));
                             }
                             _this.isCollided = false;
                             _this.collision = [];
@@ -937,7 +948,8 @@ var Mention = /** @class */ (function (_super) {
             }
             this.isTyped = false;
             range.collapse(false);
-            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] : range.getBoundingClientRect();
+            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] :
+                range.getBoundingClientRect();
         }
         var rectTop = rect.top;
         var rectLeft = rect.left;
@@ -963,7 +975,7 @@ var Mention = /** @class */ (function (_super) {
                     width += this.range.startContainer.childNodes[i].getClientRects()[0].width;
                 }
                 else if (this.range.startContainer.childNodes[i].textContent !== '') {
-                    var span_1 = document.createElement("span");
+                    var span_1 = document.createElement('span');
                     span_1.innerHTML = this.range.startContainer.childNodes[i].nodeValue;
                     document.body.appendChild(span_1);
                     var textNodeWidth = span_1.offsetWidth;
@@ -975,7 +987,8 @@ var Mention = /** @class */ (function (_super) {
         if (!this.isContentEditable(this.inputElement)) {
             coordinates = {
                 top: rectTop + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
-                    parseInt(computed.fontSize, 10) + 3 - element.scrollTop - (this.isCollided ? 10 : 0),
+                    parseInt(computed.fontSize, 10) + 3 - element.scrollTop -
+                    (this.isCollided ? 10 : 0),
                 left: rectLeft + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth, 10)
             };
             document.body.removeChild(div);
@@ -1059,7 +1072,7 @@ var Mention = /** @class */ (function (_super) {
         this.removeHover();
         var value = this.getFormattedValue(li.getAttribute('data-value'));
         var selectedData = this.getDataByValue(value);
-        if (!preventSelect && !isNullOrUndefined(e) && !(e.action === "down" || e.action === "up")) {
+        if (!preventSelect && !isNullOrUndefined(e) && !(e.action === 'down' || e.action === 'up')) {
             var items = this.detachChanges(selectedData);
             this.isSelected = true;
             var eventArgs = {
@@ -1219,14 +1232,13 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.updateMentionValue = function (e) {
         var dataItem = this.getItemData();
-        var textSuffix;
+        var textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
         var value;
         var endPos;
         var range;
         var globalRange;
         var selection = this.inputElement.ownerDocument.getSelection();
         var startPos = this.getTriggerCharPosition();
-        textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
         if (this.isSelectCancel) {
             this.isSelectCancel = false;
             return;
@@ -1255,7 +1267,8 @@ var Mention = /** @class */ (function (_super) {
             }
             globalRange = this.range;
             range = document.createRange();
-            if (((this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) || this.getTextRange() && this.getTextRange().trim() === this.mentionChar)) {
+            if (((this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) || this.getTextRange() &&
+                this.getTextRange().trim() === this.mentionChar)) {
                 range.setStart(globalRange.startContainer, startPos);
                 range.setEnd(globalRange.startContainer, endPos);
             }
@@ -1303,7 +1316,6 @@ var Mention = /** @class */ (function (_super) {
                 var event_1 = new CustomEvent('content-changed', { detail: { click: true } });
                 this.inputElement.dispatchEvent(event_1);
             }
-            ;
             this.onChangeEvent(e);
         }
     };
@@ -1326,7 +1338,6 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.setDisplayTemplate = function (e) {
         var _this = this;
-        var compiledString;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate(['displayTemplate']);
@@ -1342,7 +1353,7 @@ var Mention = /** @class */ (function (_super) {
         if (!this.isReact) {
             this.displayTempElement.innerHTML = '';
         }
-        compiledString = compile(this.displayTemplate);
+        var compiledString = compile(this.displayTemplate);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var displayCompTemp = compiledString(this.itemData, this, 'displayTemplate', this.displayTemplateId, this.isStringTemplate, null, this.displayTempElement);
         if (displayCompTemp && displayCompTemp.length > 0) {
@@ -1364,7 +1375,6 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.setSpinnerTemplate = function () {
         var _this = this;
-        var compiledString;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate(['spinnerTemplate']);
@@ -1380,7 +1390,7 @@ var Mention = /** @class */ (function (_super) {
         if (!this.isReact) {
             this.spinnerTemplateElement.innerHTML = '';
         }
-        compiledString = compile(this.spinnerTemplate);
+        var compiledString = compile(this.spinnerTemplate);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var spinnerCompTemp = compiledString(null, this, 'spinnerTemplate', this.spinnerTemplateId, this.isStringTemplate, null, this.spinnerTemplateElement);
         if (spinnerCompTemp && spinnerCompTemp.length > 0) {
@@ -1533,6 +1543,59 @@ var Mention = /** @class */ (function (_super) {
         this.popupObj.element.style.left = formatUnit(positionX);
         this.popupObj.element.style.top = formatUnit(positionY);
     };
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    Mention.prototype.disableItem = function (item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            var itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (var index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        var value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (var index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    var li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        this.dataSource = this.listData;
+                    }
+                }
+            }
+        }
+    };
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

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

@@ -203,7 +203,8 @@ var CheckBoxSelection = /** @class */ (function () {
     };
     CheckBoxSelection.prototype.clickHandler = function (e) {
         var target;
-        if (e.currentTarget.classList.contains(this.checkAllParent.className) || (e.currentTarget.classList.value === this.checkAllParent.className)) {
+        if (e.currentTarget.classList.contains(this.checkAllParent.className) ||
+            (e.currentTarget.classList.value === this.checkAllParent.className)) {
             target = e.currentTarget.firstElementChild.lastElementChild;
         }
         else {
@@ -258,7 +259,7 @@ var CheckBoxSelection = /** @class */ (function () {
             });
             this.parent.element.parentNode.insertBefore(this.filterInput, this.parent.element);
             var backIcon = false;
-            if (Browser.isDevice) {
+            if (Browser.isDevice && this.parent.isDeviceFullScreen) {
                 backIcon = true;
                 this.parent.mobFilter = false;
             }

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

@@ -73,4 +73,5 @@ export interface IMulitSelect extends Component<HTMLElement> {
     isDynamicDataChange?: boolean;
     search?(e: KeyboardEventArgs): void;
     allowFiltering?: boolean;
+    isDeviceFullScreen: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { isCollide, Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate, JsonAdaptor, DataOptions } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { isCollide, Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { attributes, setValue , getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate, JsonAdaptor, DataOptions } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -92,7 +92,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
     enableHtmlSanitizer?: boolean;
 
     /**
-     * Defines whether to enable virtual scrolling in the component. 
+     * Defines whether to enable virtual scrolling in the component.
      *
      * @default false
      */
@@ -298,6 +298,13 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     allowFiltering?: boolean;
 
+    /**
+     * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
+     *
+     * @default true
+     */
+    isDeviceFullScreen?: boolean;
+
     /**
      * By default, the multiselect component fires the change event while focus out the component.
      * If you want to fires the change event on every value selection and remove, then disable the changeOnBlur property.
@@ -355,11 +362,11 @@ export interface MultiSelectModel extends DropDownBaseModel{
     value?: number[] | string[] | boolean[] | object[] | null ;
 
     /**
-    * Defines whether the object binding is allowed or not in the component.
-    *
-    * @default false
-    */
-    allowObjectBinding?: boolean; 
+     * Defines whether the object binding is allowed or not in the component.
+     *
+     * @default false
+     */
+    allowObjectBinding?: boolean;
 
     /**
      * Hides the selected item from the list item.
@@ -472,7 +479,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
      *
      * @default false
      */
-    addTagOnBlur?: boolean; 
+    addTagOnBlur?: boolean;
 
     /**
      * Fires each time when selection changes happened in list items after model and input value get affected.

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

@@ -54,6 +54,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isRemoteSelection;
     private isSelectAllTarget;
     private previousFocusItem;
+    private isRemoveSelection;
+    private currentRemoveValue;
     private selectedListData;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
@@ -322,6 +324,12 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default null
      */
     allowFiltering: boolean;
+    /**
+     * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
+     *
+     * @default true
+     */
+    isDeviceFullScreen: boolean;
     /**
      * By default, the multiselect component fires the change event while focus out the component.
      * If you want to fires the change event on every value selection and remove, then disable the changeOnBlur property.
@@ -372,10 +380,10 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     value: number[] | string[] | boolean[] | object[] | null;
     /**
-    * Defines whether the object binding is allowed or not in the component.
-    *
-    * @default false
-    */
+     * Defines whether the object binding is allowed or not in the component.
+     *
+     * @default false
+     */
     allowObjectBinding: boolean;
     /**
      * Hides the selected item from the list item.
@@ -701,7 +709,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private escapeAction;
     private scrollBottom;
     private scrollTop;
-    private IsScrollerAtEnd;
+    private isScrollerAtEnd;
     private selectListByKey;
     private refreshListItems;
     private removeSelectedChip;
@@ -867,12 +875,14 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     /**
      * Hides the popup, if the popup in a open state.
      *
+     * @param {MouseEvent | KeyboardEventArgs} e - Specifies the mouse event or keyboard event.
      * @returns {void}
      */
     hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
     /**
      * Shows the popup, if the popup in a closed state.
      *
+     * @param {MouseEvent | KeyboardEventArgs} e - Specifies the mouse event or keyboard event.
      * @returns {void}
      */
     showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;