@syncfusion/ej2-dropdowns 31.2.4 → 31.2.12

package/dist/global/index.d.ts

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

package/src/common/highlight-search.js

@@ -9,7 +9,7 @@
  */
 export function highlightSearch(element, query, ignoreCase, type) {
     var isHtmlElement = /<[^>]*>/g.test(element.innerText);
-    if (isHtmlElement) {
+    if (isHtmlElement && query !== '') {
         element.innerText = element.innerText.replace(/[\u00A0-\u9999<>&]/g, function (match) { return "&#" + match.charCodeAt(0) + ";"; });
     }
     if (query === '') {

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

@@ -3588,9 +3588,18 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else if (this.element.tagName === 'SELECT' && this.element.options[0]) {
             var selectElement = this.element;
-            this.value = this.allowObjectBinding ? this.getDataByValue(selectElement.options[selectElement.selectedIndex].value) :
-                selectElement.options[selectElement.selectedIndex].value;
-            this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
+            var selectIndex = selectElement.selectedIndex;
+            if (selectIndex >= 0) {
+                this.value = this.allowObjectBinding
+                    ? this.getDataByValue(selectElement.options[selectIndex].value)
+                    : selectElement.options[selectIndex].value;
+                this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectIndex].textContent;
+            }
+            else {
+                if (this.index === null) {
+                    this.index = -1;
+                }
+            }
             this.initValue();
         }
         this.setEnabled();

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

@@ -1910,8 +1910,9 @@ var DropDownTree = /** @class */ (function (_super) {
         var isFooter = closest(target, '.' + FOOTER);
         var isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
+        var isSelectAllArea = target.classList.contains('e-ripple-container');
         if ((this.isPopupOpen && ((!isNOU(this.inputWrapper) &&
-            this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter)) ||
+            this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter || isSelectAllArea)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {

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

@@ -376,23 +376,21 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updatePopupHeightOnFilter = function () {
-        if (this.allowFiltering && this.allowResize && this.keyboardEvent) {
-            if (this.allowResize && this.popupObj && this.list) {
-                var filterText = this.inputElement && this.inputElement.value;
-                var filteredItems = this.list.querySelectorAll('li.e-list-item:not(.e-hide-listitem):not(.e-disabled)');
-                var isFiltering = filterText && filterText.length > 0;
-                if (isFiltering && filteredItems.length > 0) {
-                    var itemHeight = filteredItems[0].offsetHeight;
-                    var newHeight = filteredItems.length * itemHeight;
-                    this.popupObj.element.style.maxHeight = newHeight + 16 + 'px';
-                    this.list.style.maxHeight = newHeight + 'px';
-                }
-                else if (!isFiltering) {
-                    var restoreHeight = this.resizeHeight || parseInt(this.popupHeight, 10);
-                    this.popupObj.element.style.maxHeight = restoreHeight + 'px';
-                    this.list.style.maxHeight = restoreHeight + 'px';
-                    this.setResize();
-                }
+        if (this.allowFiltering && this.allowResize && this.keyboardEvent && this.popupObj && this.list) {
+            var filterText = this.inputElement && this.inputElement.value;
+            var filteredItems = this.list.querySelectorAll('li.e-list-item:not(.e-hide-listitem):not(.e-disabled)');
+            var isFiltering = filterText && filterText.length > 0;
+            if (isFiltering && filteredItems.length > 0) {
+                var itemHeight = filteredItems[0].offsetHeight;
+                var newHeight = filteredItems.length * itemHeight;
+                this.popupObj.element.style.maxHeight = newHeight + 16 + 'px';
+                this.list.style.maxHeight = newHeight + 'px';
+            }
+            else if (!isFiltering) {
+                var restoreHeight = this.resizeHeight || parseInt(this.popupHeight, 10);
+                this.popupObj.element.style.maxHeight = restoreHeight + 'px';
+                this.list.style.maxHeight = restoreHeight + 'px';
+                this.setResize();
             }
         }
     };
@@ -2510,9 +2508,10 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.removeChipSelection = function () {
         if (this.chipCollectionWrapper) {
             var selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP + '.' + CHIP_SELECTED);
-            if (selectedChips && selectedChips.length > 0) {
-                for (var i = 0; i < selectedChips.length; i++) {
-                    selectedChips[i].removeAttribute('aria-live');
+            if (selectedChips && selectedChips.length === 1) {
+                selectedChips[0].removeAttribute('id');
+                if (!isNullOrUndefined(this.inputElement) && this.inputElement.hasAttribute('aria-activedescendant')) {
+                    this.inputElement.removeAttribute('aria-activedescendant');
                 }
             }
             this.removeChipFocus();
@@ -2521,7 +2520,10 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.addChipSelection = function (element, e) {
         addClass([element], CHIP_SELECTED);
         if (element) {
-            element.setAttribute('aria-live', 'polite');
+            element.setAttribute('id', this.element.id + '_chip_item');
+            if (!isNullOrUndefined(this.inputElement) && element.id && !this.inputElement.hasAttribute('aria-activedescendant')) {
+                this.inputElement.setAttribute('aria-activedescendant', element.id);
+            }
         }
         this.trigger('chipSelection', e);
     };

package/styles/bds-lite.css

@@ -631,6 +631,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bds.css

@@ -766,6 +766,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap-dark-lite.css

@@ -420,6 +420,15 @@
   content: "\eb08";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap-dark.css

@@ -495,6 +495,15 @@
   content: "\eb08";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap-lite.css

@@ -420,6 +420,15 @@
   content: "\eb08";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap.css

@@ -495,6 +495,15 @@
   content: "\eb08";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap4-lite.css

@@ -462,6 +462,15 @@
   content: "\e7cf";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap4.css

@@ -541,6 +541,15 @@
   content: "\e7cf";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap5-dark-lite.css

@@ -477,6 +477,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap5-dark.css

@@ -566,6 +566,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap5-lite.css

@@ -477,6 +477,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap5.3-lite.css

@@ -481,6 +481,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap5.3.css

@@ -570,6 +570,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/bootstrap5.css

@@ -566,6 +566,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/_bds-definition.scss

@@ -17,6 +17,8 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$border-type: solid !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -35,6 +37,7 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value solid !default;
 
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {

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

@@ -8,7 +8,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 24px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $grey-dark-font !default;
@@ -25,6 +25,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $grey-lighter !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;

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

@@ -7,7 +7,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 24px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $grey-dark !default;
@@ -24,6 +24,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $grey-cc !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;

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

@@ -1,4 +1,5 @@
 $ddl-input-font-size: 14px !default;
+$border-type: solid !default;
 
 // $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -27,6 +28,8 @@ $ddl-icon-hover-color: rgba($black, .4) !default;
 $ddl-readonly-bg-color: $gray-200 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $gray-400 !default;
+$input-border: $ddl-zero-value $border-type !default;
+$input-margin-top: 24px !default;
 
 // small size
 $ddl-small-list-font-size: 13px !default;

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

@@ -1,5 +1,6 @@
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
+$border-type: solid !default;
 $ddl-input-border: 1px $border-light !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
@@ -18,6 +19,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $border !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -36,6 +38,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {

package/styles/drop-down-list/_bootstrap5.3-definition.scss

@@ -1,5 +1,6 @@
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
+$border-type: solid !default;
 $ddl-input-border: 1px $border-light !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
@@ -19,6 +20,7 @@ $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-list-disable-item-color: $flyout-text-color-disabled !default;
 $ddl-box-border-color: $border !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -37,6 +39,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {

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

@@ -8,7 +8,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 28px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $neutral-primary !default;
@@ -31,6 +31,7 @@ $ddl-small-list-font-size: 13px !default;
 
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 //enddefault
 

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

@@ -7,7 +7,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 28px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $neutral-primary !default;
@@ -24,6 +24,7 @@ $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-box-border-color: $neutral-tertiary-alt !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 //small size
 $ddl-small-list-font-size: 13px !default;

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

@@ -1,6 +1,7 @@
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
+$border-type: solid !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
 $ddl-input-padding: 8px $ddl-zero-value 4px !default;
@@ -18,6 +19,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color !default;
 $ddl-filter-parent-border: 1px solid $flyout-border !default;
 $ddl-filter-margin: 0 !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -36,6 +38,7 @@ $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-bg: $flyout-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: none !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {

package/styles/drop-down-list/_fluent2-definition.scss

@@ -2,6 +2,7 @@ $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
 $ddl-input-font-family: inherit !default;
+$border-type: solid !default;
 $ddl-input-margin-bottom: 4px !default;
 $ddl-input-padding: 8px $ddl-zero-value 4px !default;
 $ddl-input-group-border-width: $ddl-zero-value !default;
@@ -17,6 +18,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -36,6 +38,7 @@ $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: none !default;
 $ddl-list-disable-item-color: $flyout-text-color-disabled !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/drop-down-list/_fusionnew-definition.scss

@@ -1,6 +1,7 @@
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
+$border-type: solid !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
 $ddl-input-padding: 8px $ddl-zero-value 4px !default;
@@ -17,6 +18,7 @@ $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -35,6 +37,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {

package/styles/drop-down-list/_highcontrast-definition.scss

@@ -7,7 +7,7 @@ $ddl-input-padding: 8px !default;
 $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
-
+$input-margin-top: 28px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $bg-base-20 !default;
@@ -30,6 +30,7 @@ $ddl-small-list-font-size: 13px !default;
 
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-highcontrast') {
   #{&}.e-popup.e-ddl .e-dropdownbase {

package/styles/drop-down-list/_highcontrast-light-definition.scss

@@ -9,7 +9,7 @@ $ddl-input-group-border-width: 1px !default;
 $ddl-clear-icon-margin-right: 0 !default;
 $ddl-active-font-color: $active-font-color !default;
 $ddl-box-border-color: $border-fg !default;
-
+$input-margin-top: 28px !default;
 $ddl-list-search-icon-padding: 8px !default;
 $ddl-list-filter-text-indent: 0 12px !default;
 $ddl-list-icon-color: $bg-base-20 !default;
@@ -31,6 +31,7 @@ $ddl-small-list-font-size: 13px !default;
 
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 //enddefault
 @include export-module('dropdownlist-highcontrast-light') {