@syncfusion/ej2-dropdowns 32.2.4 → 32.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.4
+*  version : 32.2.7
 *  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.2.4",
+  "version": "32.2.7",
   "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": "~32.2.3",
+    "@syncfusion/ej2-base": "~32.2.6",
     "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-inputs": "~32.2.3",
-    "@syncfusion/ej2-lists": "~32.2.3",
-    "@syncfusion/ej2-navigations": "~32.2.3",
+    "@syncfusion/ej2-inputs": "~32.2.7",
+    "@syncfusion/ej2-lists": "~32.2.7",
+    "@syncfusion/ej2-navigations": "~32.2.7",
     "@syncfusion/ej2-notifications": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.4"
+    "@syncfusion/ej2-popups": "~32.2.7"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -133,6 +133,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private filterArgs;
     private isReactTemplateUpdate;
     private iOSscrollPosition;
+    private resizeHandler;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *

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

@@ -593,7 +593,8 @@ var DropDownList = /** @class */ (function (_super) {
         EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);
         EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);
         EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
         this.bindCommonEvent();
     };
     DropDownList.prototype.bindCommonEvent = function () {
@@ -1383,7 +1384,10 @@ var DropDownList = /** @class */ (function (_super) {
             EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
             EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
             EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
-            EventHandler.remove(window, 'resize', this.windowResize);
+            if (this.resizeHandler) {
+                window.removeEventListener('resize', this.resizeHandler);
+                this.resizeHandler = null;
+            }
         }
         this.unBindCommonEvent();
     };

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

@@ -410,10 +410,23 @@ export interface DropDownTreeModel extends ComponentModel{
      * Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
      * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
+     *
      * @default true
      */
     enableHtmlSanitizer?: boolean;
 
+    /**
+     * Enables rendering of raw text content in the Dropdown Tree component without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
+     * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     *
+     * @default true
+     */
+    disableHtmlEncode?: boolean
+
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.

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

@@ -580,9 +580,21 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
      * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
+     *
      * @default true
      */
     enableHtmlSanitizer: boolean;
+    /**
+     * Enables rendering of raw text content in the Dropdown Tree component without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
+     * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     *
+     * @default true
+     */
+    disableHtmlEncode: boolean;
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.
@@ -898,6 +910,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private updateText;
     private updateModelMode;
     private updateOption;
+    private getDomSetter;
+    private getSanitizedText;
     /**
      * Dynamically change the value of properties.
      *

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

@@ -1072,12 +1072,7 @@ var DropDownTree = /** @class */ (function (_super) {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        if (this.enableHtmlSanitizer) {
-                            this.overFlowWrapper.innerText = SanitizeHtmlHelper.sanitize(data);
-                        }
-                        else {
-                            this.overFlowWrapper.innerHTML = data;
-                        }
+                        this.overFlowWrapper[this.getDomSetter()] = this.getSanitizedText(data);
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -1657,6 +1652,7 @@ var DropDownTree = /** @class */ (function (_super) {
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
             enableHtmlSanitizer: this.enableHtmlSanitizer,
+            disableHtmlEncode: this.disableHtmlEncode,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -2643,12 +2639,7 @@ var DropDownTree = /** @class */ (function (_super) {
         });
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        if (this.enableHtmlSanitizer) {
-            chipContent.innerText = SanitizeHtmlHelper.sanitize(text);
-        }
-        else {
-            chipContent.innerHTML = text;
-        }
+        chipContent[this.getDomSetter()] = this.getSanitizedText(text);
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -3087,6 +3078,12 @@ var DropDownTree = /** @class */ (function (_super) {
             this.hiddenElement.removeAttribute('multiple');
         }
     };
+    DropDownTree.prototype.getDomSetter = function () {
+        return this.disableHtmlEncode ? 'textContent' : 'innerHTML';
+    };
+    DropDownTree.prototype.getSanitizedText = function (text) {
+        return this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(text) : text;
+    };
     /**
      * Dynamically change the value of properties.
      *
@@ -3556,6 +3553,9 @@ var DropDownTree = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Property(true)
+    ], DropDownTree.prototype, "disableHtmlEncode", void 0);
     __decorate([
         Property(true)
     ], DropDownTree.prototype, "showClearButton", void 0);

package/src/list-box/list-box.d.ts

@@ -138,6 +138,7 @@ export declare class ListBox extends DropDownBase {
     private timer;
     private inputFormName;
     private selectedListItemCount;
+    private boundResizeHandler;
     /**
      * Sets the CSS classes to root element of this component, which helps to customize the
      * complete styles.

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

@@ -1236,7 +1236,8 @@ var ListBox = /** @class */ (function (_super) {
         if (form) {
             EventHandler.add(form, 'reset', this.formResetHandler, this);
         }
-        window.addEventListener('resize', this.resizeHandler.bind(this));
+        this.boundResizeHandler = this.resizeHandler.bind(this);
+        window.addEventListener('resize', this.boundResizeHandler);
     };
     ListBox.prototype.wireToolbarEvent = function () {
         if (this.toolbarSettings.items.length) {
@@ -1258,7 +1259,10 @@ var ListBox = /** @class */ (function (_super) {
         if (form) {
             EventHandler.remove(form, 'reset', this.formResetHandler);
         }
-        window.removeEventListener('resize', this.resizeHandler.bind(this));
+        if (this.boundResizeHandler) {
+            window.removeEventListener('resize', this.boundResizeHandler);
+            this.boundResizeHandler = null;
+        }
     };
     ListBox.prototype.clickHandler = function (e) {
         var li = closest(e.target, '.' + 'e-list-item');

package/src/mention/mention.d.ts

@@ -59,6 +59,9 @@ export declare class Mention extends DropDownBase {
     private isUpDownKey;
     private isRTE;
     private keyEventName;
+    private keyupHandler;
+    private keydownHandler;
+    private popupAppendTo;
     /**
      * Defines class/multiple classes separated by a space for the mention component.
      *
@@ -410,6 +413,7 @@ export declare class Mention extends DropDownBase {
     hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
     private closePopup;
     private renderPopup;
+    protected getAppendToElement(): HTMLElement;
     private setHeight;
     private checkCollision;
     private getTriggerCharPosition;

package/src/mention/mention.js

@@ -145,16 +145,21 @@ var Mention = /** @class */ (function (_super) {
         this.wireEvent();
     };
     Mention.prototype.wireEvent = function () {
-        EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
+        this.keyupHandler = this.onKeyUp.bind(this);
+        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         this.bindCommonEvent();
     };
     Mention.prototype.unWireEvent = function () {
-        EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
+        if (this.keyupHandler) {
+            EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
+            this.keyupHandler = null;
+        }
         this.unBindCommonEvent();
     };
     Mention.prototype.bindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
+            this.keydownHandler = this.keyDownHandler.bind(this);
+            this.inputElement.addEventListener('keydown', this.keydownHandler, !this.isRTE);
         }
     };
     /**
@@ -343,8 +348,9 @@ var Mention = /** @class */ (function (_super) {
         return !isNullOrUndefined(element);
     };
     Mention.prototype.unBindCommonEvent = function () {
-        if (!Browser.isDevice) {
-            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
+        if (!Browser.isDevice && this.keydownHandler) {
+            this.inputElement.removeEventListener('keydown', this.keydownHandler, !this.isRTE);
+            this.keydownHandler = null;
         }
     };
     Mention.prototype.onKeyUp = function (e) {
@@ -827,9 +833,11 @@ var Mention = /** @class */ (function (_super) {
                         addClass([popupEle_1], 'e-rte-elements');
                     }
                 }
+                var appendToElement = _this.getAppendToElement();
+                _this.popupAppendTo = appendToElement;
                 if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||
                     !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
-                    document.body.appendChild(popupEle_1);
+                    appendToElement.appendChild(popupEle_1);
                 }
                 var coordinates_1;
                 popupEle_1.style.visibility = 'hidden';
@@ -902,6 +910,19 @@ var Mention = /** @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.getAppendToElement = function () {
+        if (this.popupAppendTo) {
+            return this.popupAppendTo;
+        }
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     Mention.prototype.setHeight = function (popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
             this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property

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

@@ -75,6 +75,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isFilterPrevented;
     private isFilteringAction;
     private headerTemplateHeight;
+    private resizeHandler;
     /**
      * 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.

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

@@ -3577,7 +3577,8 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.wireEvent = function () {
         EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
         EventHandler.add(this.inputElement, 'focus', this.focusInHandler, this);
         EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);
         EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);
@@ -4888,7 +4889,10 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.componentWrapper)) {
             EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
         }
-        EventHandler.remove(window, 'resize', this.windowResize);
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
         if (!isNullOrUndefined(this.inputElement)) {
             EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
             EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);

package/styles/list-box/_material3-dark-definition.scss

@@ -2,6 +2,9 @@
 @forward 'ej2-base/styles/definition/material3-dark';
 
 //layout variables
+$list-header-bg-color: $transparent !default;
+$list-header-text-color: rgba($content-text-color-alt1) !default;
+$list-header-icon-color: rgba($icon-color) !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -111,8 +114,8 @@ $listbox-header-border: rgba($border-light) !default;
 $checkmark-bgcolor: rgba($primary) !default;
 $checkmark-border-color: transparent !default;
 $checkmark-color: rgba($primary-text-color) !default;
-$listbox-groupheader-text-color: rgba($content-text-color-alt1) !default;
-$listbox-groupheader-bg: $content-bg-color-alt2 !default;
+$listbox-groupheader-text-color: $list-header-text-color !default;
+$listbox-groupheader-bg: $list-header-bg-color !default;
 $listbox-groupheader-border: rgba($content-text-color-alt1) !default;
 $listbox-groupheader-icon: rgba($icon-color) !default;
 $listbox-template-multiline-header-color: rgba($content-text-color) !default;

package/styles/list-box/_material3-definition.scss

@@ -2,6 +2,9 @@
 @forward 'ej2-base/styles/definition/material3';
 
 //layout variables
+$list-header-bg-color: $transparent !default;
+$list-header-text-color: rgba($content-text-color-alt1) !default;
+$list-header-icon-color: rgba($icon-color) !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -111,8 +114,8 @@ $listbox-header-border: rgba($border-light) !default;
 $checkmark-bgcolor: rgba($primary) !default;
 $checkmark-border-color: transparent !default;
 $checkmark-color: rgba($primary-text-color) !default;
-$listbox-groupheader-text-color: rgba($content-text-color-alt1) !default;
-$listbox-groupheader-bg: $content-bg-color-alt2 !default;
+$listbox-groupheader-text-color: $list-header-text-color !default;
+$listbox-groupheader-bg: $list-header-bg-color !default;
 $listbox-groupheader-border: rgba($content-text-color-alt1) !default;
 $listbox-groupheader-icon: rgba($icon-color) !default;
 $listbox-template-multiline-header-color: rgba($content-text-color) !default;

package/styles/list-box/material3-dark.css

@@ -838,7 +838,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/list-box/material3.css

@@ -844,7 +844,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3-dark-lite.css

@@ -5628,7 +5628,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3-dark.css

@@ -7632,7 +7632,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3-lite.css

@@ -5568,7 +5568,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3.css

@@ -7582,7 +7582,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;