@syncfusion/ej2-dropdowns 32.1.20 → 32.1.22

package/dist/global/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "32.1.20",
+  "version": "32.1.22",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,10 +10,10 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~32.1.19",
     "@syncfusion/ej2-data": "~32.1.19",
-    "@syncfusion/ej2-inputs": "~32.1.20",
+    "@syncfusion/ej2-inputs": "~32.1.22",
     "@syncfusion/ej2-lists": "~32.1.19",
     "@syncfusion/ej2-navigations": "~32.1.19",
-    "@syncfusion/ej2-notifications": "~32.1.19",
+    "@syncfusion/ej2-notifications": "~32.1.22",
     "@syncfusion/ej2-popups": "~32.1.19"
   },
   "devDependencies": {},

package/src/common/virtual-scroll.js

@@ -262,6 +262,10 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.totalItemsCount();
         }
         if (isListUpdated) {
+            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount) {
+                this.parent.viewPortInfo.endIndex = endIndex = this.parent.totalItemCount;
+                this.parent.isVirtualTrackHeight = true;
+            }
             for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
                 var index = i;
                 if (this.component === 'multiselect' && this.parent.mode === 'CheckBox') {

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

@@ -870,13 +870,15 @@ var DropDownBase = /** @class */ (function (_super) {
                             var newQuery = _this.getQuery(eventArgs.query);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             if (_this.isVirtualizationEnabled && (listItems.count !== 0 &&
-                                listItems.count < (_this.itemCount * 2)) && !_this.appendUncheckList) {
+                                listItems.count < (_this.itemCount * 2))) {
                                 if (newQuery) {
                                     for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                         if (_this.getModuleName() === 'multiselect' && _this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
                                             newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !_this.isCustomFiltering)) {
-                                            isReOrder = false;
-                                            break;
+                                            if (_this.totalItemCount > (_this.itemCount * 2)) {
+                                                isReOrder = false;
+                                                break;
+                                            }
                                         }
                                         if (newQuery.queries[queryElements].fn === 'onTake') {
                                             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/mention/mention.d.ts

@@ -377,6 +377,7 @@ export declare class Mention extends DropDownBase {
     private isSelectFocusItem;
     private unBindCommonEvent;
     private onKeyUp;
+    private showPopupWithDebounce;
     private isMatchedText;
     private getCurrentRange;
     protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;

package/src/mention/mention.js

@@ -348,6 +348,7 @@ var Mention = /** @class */ (function (_super) {
         }
     };
     Mention.prototype.onKeyUp = function (e) {
+        var _this = this;
         var rangetextContent;
         if (this.isUpDownKey && this.isPopupOpen && e.keyCode === 229) {
             this.isUpDownKey = false;
@@ -399,13 +400,33 @@ var Mention = /** @class */ (function (_super) {
             this.hidePopup();
             return;
         }
+        var prevSiblingIsChip = (function () {
+            if (!_this.isContentEditable(_this.inputElement) || !_this.range || !_this.range.startContainer) {
+                return false;
+            }
+            var startContainer = _this.range.startContainer;
+            var textNode = startContainer.nodeType === Node.TEXT_NODE ? startContainer : (function () {
+                var idx = Math.min(_this.range.startOffset, startContainer.childNodes.length - 1);
+                var child = startContainer.childNodes[idx] || startContainer.firstChild;
+                return child && child.nodeType === Node.TEXT_NODE ? child : null;
+            })();
+            if (!textNode) {
+                return false;
+            }
+            var firstChar = (textNode.data || '').replace(/\u200B/g, '').replace(/\u00A0/g, ' ').charAt(0);
+            var previousSibling = textNode.previousSibling;
+            while (previousSibling && ((previousSibling.nodeType === Node.TEXT_NODE && !(previousSibling.data || '').trim()) || (previousSibling.tagName === 'BR'))) {
+                previousSibling = previousSibling.previousSibling;
+            }
+            return firstChar === _this.mentionChar && !!(previousSibling && previousSibling.classList && previousSibling.classList.contains('e-mention-chip'));
+        })();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace && !this.allowSpaces)) || e.code === 'Enter' || e.keyCode === 27 ||
             (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
             (this.isContentEditable(this.inputElement) && this.range.startContainer &&
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
-                    this.range.startContainer.nodeType === 1))) {
+                    this.range.startContainer.nodeType === 1)) && !prevSiblingIsChip) {
             if (isValid && this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
                 && !this.isMatchedText() && this.list && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' && e.code !== 'Enter') {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
@@ -430,11 +451,11 @@ var Mention = /** @class */ (function (_super) {
             this.searchLists(e);
             if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
                 if (!this.isContentEditable(this.inputElement)) {
-                    this.showPopup();
+                    this.showPopupWithDebounce();
                 }
                 else if (this.isContentEditable(this.inputElement) && this.range &&
                     this.range.startContainer !== this.inputElement && e.keyCode !== 9) {
-                    this.showPopup();
+                    this.showPopupWithDebounce();
                 }
             }
         }
@@ -472,6 +493,15 @@ var Mention = /** @class */ (function (_super) {
         }
         this.isListResetted = false;
     };
+    Mention.prototype.showPopupWithDebounce = function () {
+        var _this = this;
+        if (this.minLength > 0 && this.minLength === this.queryString.length) {
+            setTimeout(function () { _this.showPopup(); }, this.debounceDelay);
+        }
+        else {
+            this.showPopup();
+        }
+    };
     Mention.prototype.isMatchedText = function () {
         var isMatched = false;
         for (var i = 0; i < (this.liCollections && this.liCollections.length); i++) {
@@ -882,15 +912,13 @@ var Mention = /** @class */ (function (_super) {
         }
     };
     Mention.prototype.checkCollision = function (popupEle) {
-        if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
-            var coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
-            this.collision = isCollide(popupEle, null, coordinates.left, coordinates.top);
-            if (this.collision.length > 0) {
-                popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
-                this.isCollided = true;
-            }
-            this.popupObj.resolveCollision();
+        var coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
+        this.collision = isCollide(popupEle, null, coordinates.left, coordinates.top);
+        if (this.collision.length > 0) {
+            popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+            this.isCollided = true;
         }
+        this.popupObj.resolveCollision();
     };
     Mention.prototype.getTriggerCharPosition = function () {
         var mostRecentTriggerCharPos;
@@ -940,7 +968,7 @@ var Mention = /** @class */ (function (_super) {
             this.popupObj.element.removeAttribute('style');
             this.popupObj.element.removeAttribute('aria-disabled');
         }
-        if (this.list.classList.contains('e-nodata')) {
+        if (this.list && this.list.classList.contains('e-nodata')) {
             this.list = null;
         }
     };
@@ -1376,14 +1404,15 @@ var Mention = /** @class */ (function (_super) {
             value = this.displayTempElement.innerHTML;
         }
         if (this.isContentEditable(this.inputElement)) {
+            var defaultSuffix = this.isRTE ? '&#8203;' : '';
             if (Browser.isAndroid) {
-                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '&#8203;');
+                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : defaultSuffix);
             }
             else if (Browser.info.name === 'mozilla') {
-                return '<span>&#65279;<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>&#65279;</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '&#8203;');
+                return '<span>&#65279;<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>&#65279;</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : defaultSuffix);
             }
             else {
-                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '&#8203;');
+                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : defaultSuffix);
             }
         }
         else {

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

@@ -5867,7 +5867,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {
                             _this.totalItemsCount();
                         }
-                        if (!_this.preventSetCurrentData && _this.totalItemCount > (_this.itemCount * 2) &&
+                        if (!_this.preventSetCurrentData &&
                             !isNullOrUndefined(_this.viewPortInfo.startIndex) &&
                             !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
                             _this.notify('setCurrentViewDataAsync', {

package/styles/bootstrap5.3-lite.css

@@ -2928,7 +2928,7 @@ ejs-listbox {
 .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
 .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
 .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
-  color: rgba(var(--color-sf-content-text-color), 0.87);
+  color: var(--color-sf-content-text-color-selected);
 }
 .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,

package/styles/bootstrap5.3.css

@@ -3539,7 +3539,7 @@ ejs-listbox {
 .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
 .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
 .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
-  color: rgba(var(--color-sf-content-text-color), 0.87);
+  color: var(--color-sf-content-text-color-selected);
 }
 .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,

package/styles/list-box/_bootstrap5.3-definition.scss

@@ -102,8 +102,8 @@ $listbox-border-right-color: transparent !default;
 $listbox-border-left-color: transparent !default;
 $listbox-text-hover-color: $content-text-color !default;
 $listbox-item-active-bg: $content-bg-color-selected !default;
-$listbox-text-active-color: rgba($content-text-color, .87) !default;
 $listbox-text-selected-color: $content-text-color-selected !default;
+$listbox-text-active-color: $listbox-text-selected-color !default;
 $listbox-header-text-color: $content-text-color-alt2 !default;
 $listbox-header-text-disabled: $content-text-color-disabled !default;
 $listbox-header-bg: $content-bg-color-alt2 !default;

package/styles/list-box/bootstrap5.3.css

@@ -842,7 +842,7 @@ ejs-listbox {
 .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
 .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
 .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
-  color: rgba(var(--color-sf-content-text-color), 0.87);
+  color: var(--color-sf-content-text-color-selected);
 }
 .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,