@syncfusion/ej2-dropdowns 34.1.32 → 34.2.2

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.1.32
+*  version : 34.2.2
 *  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": "34.1.32",
+  "version": "34.2.2",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.1.30",
-    "@syncfusion/ej2-data": "~34.1.32",
-    "@syncfusion/ej2-inputs": "~34.1.32",
-    "@syncfusion/ej2-lists": "~34.1.30",
-    "@syncfusion/ej2-navigations": "~34.1.31",
-    "@syncfusion/ej2-notifications": "~34.1.29",
-    "@syncfusion/ej2-popups": "~34.1.29"
+    "@syncfusion/ej2-base": "~34.2.2",
+    "@syncfusion/ej2-data": "~34.2.2",
+    "@syncfusion/ej2-inputs": "~34.2.2",
+    "@syncfusion/ej2-lists": "~34.2.2",
+    "@syncfusion/ej2-navigations": "~34.2.2",
+    "@syncfusion/ej2-notifications": "~34.2.2",
+    "@syncfusion/ej2-popups": "~34.2.2"
   },
   "devDependencies": {},
   "keywords": [

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -339,6 +339,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private documentClickHandler;
     private windowResizeContext;
     private isCheckAllCalled;
+    private isNodeChecked;
     private isFromFilterChange;
     private valueTemplateContainer;
     private previousFilterText;
@@ -890,6 +891,10 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private removeSelectedData;
     private initializeValueTemplate;
     private showOrHideValueTemplate;
+    private getFilteredTreeData;
+    private getChildren;
+    private getDirectChildren;
+    private updateFilteredAutoCheckValues;
     private updateSelectedValues;
     private setChipValues;
     private setTagValues;

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

@@ -175,6 +175,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.windowResizeContext = _this.windowResize.bind(_this);
         // Specifies if the checkAll method has been called
         _this.isCheckAllCalled = false;
+        _this.isNodeChecked = false;
         _this.isFromFilterChange = false;
         _this.fallbackValue = [];
         return _this;
@@ -2230,6 +2231,7 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.onNodeChecked = function (args) {
         var eventArgs = this.getEventArgs(args);
         this.trigger('select', eventArgs);
+        this.isNodeChecked = args.action === 'check';
         if (this.isFilteredData && args.action === 'uncheck') {
             var id = getValue('id', args.data[0]).toString();
             this.removeSelectedData(id, true);
@@ -2555,6 +2557,143 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         }
     };
+    DropDownTree.prototype.getFilteredTreeData = function () {
+        return this.treeData;
+    };
+    DropDownTree.prototype.getChildren = function (parentId, result) {
+        var _this = this;
+        var treeData = this.getFilteredTreeData();
+        treeData.forEach(function (item) {
+            if (!isNOU(item) && !isNOU(item.pid) && !isNOU(item.id) && item.pid.toString() === parentId.toString()) {
+                var childId = item.id.toString();
+                if (result.indexOf(childId) === -1) {
+                    result.push(childId);
+                    _this.getChildren(childId, result);
+                }
+            }
+        });
+    };
+    DropDownTree.prototype.getDirectChildren = function (parentId) {
+        return this.getFilteredTreeData()
+            .filter(function (childNode) {
+            return !isNOU(childNode) && !isNOU(childNode.pid) && !isNOU(childNode.id) && childNode.pid.toString() === parentId;
+        })
+            .map(function (childNode) { return childNode.id.toString(); });
+    };
+    DropDownTree.prototype.updateFilteredAutoCheckValues = function () {
+        var _this = this;
+        var treeData = this.getFilteredTreeData();
+        var currentValues = Array.isArray(this.value) ? this.value.map(function (item) { return item.toString(); }) : [];
+        var removeParent = function (parentId) {
+            _this.value = _this.value.filter(function (value) { return value.toString() !== parentId; });
+        };
+        if (this.isNodeChecked) {
+            this.treeObj.checkedNodes.map(function (item) { return item.toString(); }).forEach(function (value) {
+                if (_this.value.indexOf(value) === -1) {
+                    _this.value.push(value);
+                }
+            });
+            treeData.forEach(function (node) {
+                if (isNOU(node) || isNOU(node.id)) {
+                    return;
+                }
+                var parentId = node.id.toString();
+                if (node.haschild && _this.value.indexOf(parentId) !== -1) {
+                    var childValues = [];
+                    _this.getChildren(parentId, childValues);
+                    if (_this.value.indexOf(parentId) === -1) {
+                        _this.value.push(parentId);
+                    }
+                    childValues.forEach(function (value) {
+                        if (_this.value.indexOf(value) === -1) {
+                            _this.value.push(value);
+                        }
+                    });
+                }
+                currentValues = _this.value.map(function (item) { return item.toString(); });
+            });
+            treeData.forEach(function (node) {
+                if (isNOU(node) || isNOU(node.id)) {
+                    return;
+                }
+                if (!node.haschild) {
+                    return;
+                }
+                var parentId = node.id.toString();
+                var directChildren = _this.getDirectChildren(parentId);
+                if (!directChildren.length) {
+                    return;
+                }
+                var allChildrenSelected = directChildren.every(function (childId) { return _this.value.indexOf(childId) !== -1; });
+                if (allChildrenSelected) {
+                    var childValues = [];
+                    _this.getChildren(parentId, childValues);
+                    if (_this.value.indexOf(parentId) === -1) {
+                        _this.value.push(parentId);
+                    }
+                    childValues.forEach(function (value) {
+                        if (_this.value.indexOf(value) === -1) {
+                            _this.value.push(value);
+                        }
+                    });
+                }
+                else {
+                    removeParent(parentId);
+                }
+                currentValues = _this.value.map(function (item) { return item.toString(); });
+            });
+            this.selectedData.forEach(function (item) {
+                var value = getValue(_this.treeSettings.loadOnDemand ? _this.fields.value : 'id', item).toString();
+                if (_this.value.indexOf(value) === -1) {
+                    _this.selectedData = _this.selectedData.filter(function (data) {
+                        return getValue(_this.treeSettings.loadOnDemand ? _this.fields.value : 'id', data).toString() !== value;
+                    });
+                }
+            });
+            return;
+        }
+        var removeValues = [];
+        treeData.forEach(function (node) {
+            if (isNOU(node.id)) {
+                return;
+            }
+            if (!node.haschild) {
+                return;
+            }
+            var parentId = node.id.toString();
+            if (currentValues.indexOf(parentId) === -1) {
+                var childValues = [];
+                _this.getChildren(parentId, childValues);
+                if (childValues.some(function (child) { return currentValues.indexOf(child) !== -1; })) {
+                    removeValues.push.apply(removeValues, childValues);
+                }
+            }
+        });
+        if (removeValues.length) {
+            this.value = this.value.filter(function (value) { return removeValues.indexOf(value.toString()) === -1; });
+            currentValues = this.value.map(function (item) { return item.toString(); });
+        }
+        treeData.forEach(function (node) {
+            if (isNOU(node) || isNOU(node.id)) {
+                return;
+            }
+            if (!node.haschild) {
+                return;
+            }
+            var parentId = node.id.toString();
+            if (currentValues.indexOf(parentId) === -1) {
+                return;
+            }
+            var hasDirectChild = treeData.some(function (childNode) {
+                return !isNOU(childNode) && !isNOU(childNode.pid) && !isNOU(childNode.id) && childNode.pid.toString() === parentId &&
+                    currentValues.indexOf(childNode.id.toString()) !== -1;
+            });
+            if (!hasDirectChild) {
+                removeParent(parentId);
+                currentValues = _this.value.map(function (item) { return item.toString(); });
+            }
+        });
+    };
     DropDownTree.prototype.updateSelectedValues = function () {
         var _this = this;
         this.dataValue = '';
@@ -2570,6 +2709,9 @@ var DropDownTree = /** @class */ (function (_super) {
         if (!this.isFilteredData) {
             this.selectedData = [];
         }
+        if (this.treeSettings.autoCheck && this.isFilteredData && !isNOU(this.value)) {
+            this.updateFilteredAutoCheckValues();
+        }
         if (!isNOU(this.value)) {
             var compiledString = this.initializeValueTemplate();
             for (var i = 0, len = this.value.length; i < len; i++) {

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

@@ -2098,11 +2098,11 @@ var ListBox = /** @class */ (function (_super) {
             e.preventDefault();
             return;
         }
-        var char = e.code && e.keyCode >= 96 && e.keyCode <= 105 ?
-            String.fromCharCode(e.keyCode - 48) : String.fromCharCode(e.keyCode);
-        var isWordCharacter = char.match(/\w/);
-        var isWordAccentCharacter = char.match(/[A-Za-z0-9\u00C0-\u024F ]/);
-        if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter)) {
+        var isSpecialKey = e.keyCode >= 186 && e.keyCode <= 192;
+        var isNumericKeyPadSpecialKey = e.keyCode === 107 || e.keyCode === 109 || e.keyCode === 111;
+        var isWordCharacter = e.key && e.key.match(/\w/);
+        var isWordAccentCharacter = e.key && e.key.match(/[A-Za-z0-9\u00C0-\u024F ,>/:;\-+=]/);
+        if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter) || isSpecialKey || isNumericKeyPadSpecialKey) {
             this.isValidKey = true;
         }
         this.isBackSpace = e.keyCode === 8;

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

@@ -80,6 +80,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private resizeHandler;
     private preventKeyboardInteraction;
     private scrollEvent;
+    private isPropertyChanged;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -838,6 +839,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateData;
     private initialTextUpdate;
     protected renderList(isEmptyData?: boolean): void;
+    private getTextByValueFromDataSource;
     private initialValueUpdate;
     protected updateActionCompleteData(li: HTMLElement, item: {
         [key: string]: Object;

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

@@ -106,6 +106,7 @@ var MultiSelect = /** @class */ (function (_super) {
         _this.isBlurDispatching = false;
         _this.isFilterPrevented = false;
         _this.isFilteringAction = false;
+        _this.isPropertyChanged = false;
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
@@ -816,7 +817,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else if (!(this.dataSource instanceof DataManager)) {
-                this.initialValueUpdate();
+                if (!this.isRemoveSelection) {
+                    this.initialValueUpdate(this.listData, true);
+                }
+                else {
+                    this.initialValueUpdate();
+                }
             }
             this.initialUpdate();
             this.refreshPlaceHolder();
@@ -4163,6 +4169,33 @@ var MultiSelect = /** @class */ (function (_super) {
         this.unwireListEvents();
         this.wireListEvents();
     };
+    MultiSelect.prototype.getTextByValueFromDataSource = function (value) {
+        var dataSource = this.dataSource;
+        if (isNullOrUndefined(dataSource) || !dataSource.length) {
+            return null;
+        }
+        if (this.isPrimitiveData) {
+            for (var i = 0; i < dataSource.length; i++) {
+                if (dataSource[i] === value) {
+                    return dataSource[i];
+                }
+            }
+            return null;
+        }
+        var fields = this.fields;
+        var valueField = fields.value ? fields.value : 'value';
+        var textField = fields.text ? fields.text : 'text';
+        for (var i = 0; i < dataSource.length; i++) {
+            var item = dataSource[i];
+            if (!isNullOrUndefined(item) && getValue(valueField, item) === value) {
+                var resolvedText = getValue(textField, item);
+                if (!isNullOrUndefined(resolvedText)) {
+                    return resolvedText;
+                }
+            }
+        }
+        return null;
+    };
     MultiSelect.prototype.initialValueUpdate = function (listItems, isInitialVirtualData, isInitialRender) {
         var _this = this;
         if (this.list) {
@@ -4213,6 +4246,10 @@ var MultiSelect = /** @class */ (function (_super) {
                                 }
                             }
                         }
+                        if (this.isPropertyChanged && isNullOrUndefined(text) && !this.allowCustomValue &&
+                            !(this.dataSource instanceof DataManager)) {
+                            text = this.getTextByValueFromDataSource(value_2);
+                        }
                         if ((isNullOrUndefined(text) && this.allowCustomValue) &&
                             ((!(this.dataSource instanceof DataManager)) ||
                                 (this.dataSource instanceof DataManager && isInitialVirtualData))) {
@@ -5847,6 +5884,7 @@ var MultiSelect = /** @class */ (function (_super) {
      * @returns {void}
      */
     MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {
+        this.isPropertyChanged = true;
         if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))
             || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
             this.mainList = null;
@@ -5892,6 +5930,10 @@ var MultiSelect = /** @class */ (function (_super) {
                         && !this.validateValues(newProp.value, oldProp.value)) {
                         return;
                     }
+                    if (this.isVue && this.mode === 'CheckBox' && !this.changeOnBlur && !isNullOrUndefined(oldProp.value) && !isNullOrUndefined(newProp.value)
+                        && !this.validateValues(newProp.value, oldProp.value)) {
+                        return;
+                    }
                     this.updateVal(this.value, oldProp.value, 'value', this.enableVirtualization);
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
@@ -6015,6 +6057,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     break;
             }
         }
+        this.isPropertyChanged = false;
     };
     MultiSelect.prototype.reInitializePoup = function () {
         if (this.popupObj) {

package/styles/auto-complete/_variables.scss

@@ -1,2 +1,2 @@
-@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/bds-lite.css

@@ -2871,4 +2871,7 @@ ejs-listbox {
   height: calc(100% - 38px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/bds.css

@@ -3723,4 +3723,7 @@ ejs-listbox {
   font-size: 14px;
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/bootstrap-dark-lite.css

@@ -2804,4 +2804,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap-dark.css

@@ -3499,4 +3499,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 106px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap-lite.css

@@ -2799,4 +2799,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap.css

@@ -3500,4 +3500,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 106px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap4-lite.css

@@ -2913,4 +2913,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap4.css

@@ -3783,4 +3783,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 108px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap5-dark-lite.css

@@ -2880,4 +2880,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap5-dark.css

@@ -3670,4 +3670,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 104px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/bootstrap5-lite.css

@@ -2882,4 +2882,7 @@ ejs-listbox {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/bootstrap5.3-lite.css

@@ -2956,4 +2956,7 @@ ejs-listbox {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/bootstrap5.3.css

@@ -3703,4 +3703,7 @@ ejs-listbox {
   height: calc(100% - 104px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/bootstrap5.css

@@ -3672,4 +3672,7 @@ ejs-listbox {
   height: calc(100% - 104px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/combo-box/_variables.scss

@@ -1,2 +1,2 @@
-@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/drop-down-base/_variables.scss

@@ -1,2 +1,2 @@
-@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/drop-down-list/_variables.scss

@@ -1,2 +1,2 @@
-@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/drop-down-tree/_variables.scss

@@ -1,2 +1,2 @@
-@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/fabric-dark-lite.css

@@ -2782,4 +2782,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/fabric-dark.css

@@ -3479,4 +3479,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 104px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/fabric-lite.css

@@ -2777,4 +2777,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/fabric.css

@@ -3480,4 +3480,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 104px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/fluent-dark-lite.css

@@ -2905,4 +2905,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/fluent-dark.css

@@ -3705,4 +3705,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 113px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/fluent-lite.css

@@ -2907,4 +2907,7 @@ ejs-listbox {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/fluent.css

@@ -3707,4 +3707,7 @@ ejs-listbox {
   height: calc(100% - 113px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/fluent2-lite.css

@@ -3127,4 +3127,7 @@ ejs-listbox {
   height: calc(100% - 38px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/fluent2.css

@@ -3802,4 +3802,7 @@ ejs-listbox {
   height: calc(100% - 106px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+.e-mention-placeholder {
+  display: block;
+}

package/styles/highcontrast-light-lite.css

@@ -2890,4 +2890,8 @@ ejs-listbox {
 
 .e-listbox-container .e-selectall-parent + .e-list-wrap {
   height: calc(100% - 36px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }

package/styles/highcontrast-light.css

@@ -3579,4 +3579,8 @@ ejs-listbox {
 
 .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
   height: calc(100% - 104px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-mention-placeholder {
+  display: block;
 }