@syncfusion/ej2-dropdowns 31.2.3 → 31.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/README.md +11 -3
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +102 -6
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +117 -20
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +6 -6
  13. package/src/combo-box/combo-box.js +3 -1
  14. package/src/drop-down-base/drop-down-base.js +10 -0
  15. package/src/drop-down-list/drop-down-list.d.ts +2 -0
  16. package/src/drop-down-list/drop-down-list.js +27 -1
  17. package/src/mention/mention.js +1 -1
  18. package/src/multi-select/multi-select.d.ts +3 -0
  19. package/src/multi-select/multi-select.js +76 -17
  20. package/styles/bds-lite.css +4 -0
  21. package/styles/bds.css +4 -0
  22. package/styles/bootstrap-dark-lite.css +4 -0
  23. package/styles/bootstrap-dark.css +4 -0
  24. package/styles/bootstrap-lite.css +4 -0
  25. package/styles/bootstrap.css +4 -0
  26. package/styles/bootstrap4-lite.css +4 -0
  27. package/styles/bootstrap4.css +4 -0
  28. package/styles/bootstrap5-dark-lite.css +4 -0
  29. package/styles/bootstrap5-dark.css +4 -0
  30. package/styles/bootstrap5-lite.css +4 -0
  31. package/styles/bootstrap5.3-lite.css +4 -0
  32. package/styles/bootstrap5.3.css +4 -0
  33. package/styles/bootstrap5.css +4 -0
  34. package/styles/drop-down-list/_layout.scss +4 -0
  35. package/styles/drop-down-list/bds.css +4 -0
  36. package/styles/drop-down-list/bootstrap-dark.css +4 -0
  37. package/styles/drop-down-list/bootstrap.css +4 -0
  38. package/styles/drop-down-list/bootstrap4.css +4 -0
  39. package/styles/drop-down-list/bootstrap5-dark.css +4 -0
  40. package/styles/drop-down-list/bootstrap5.3.css +4 -0
  41. package/styles/drop-down-list/bootstrap5.css +4 -0
  42. package/styles/drop-down-list/fabric-dark.css +4 -0
  43. package/styles/drop-down-list/fabric.css +4 -0
  44. package/styles/drop-down-list/fluent-dark.css +4 -0
  45. package/styles/drop-down-list/fluent.css +4 -0
  46. package/styles/drop-down-list/fluent2.css +4 -0
  47. package/styles/drop-down-list/highcontrast-light.css +4 -0
  48. package/styles/drop-down-list/highcontrast.css +4 -0
  49. package/styles/drop-down-list/material-dark.css +4 -0
  50. package/styles/drop-down-list/material.css +4 -0
  51. package/styles/drop-down-list/material3-dark.css +4 -0
  52. package/styles/drop-down-list/material3.css +4 -0
  53. package/styles/drop-down-list/tailwind-dark.css +4 -0
  54. package/styles/drop-down-list/tailwind.css +4 -0
  55. package/styles/drop-down-list/tailwind3.css +4 -0
  56. package/styles/fabric-dark-lite.css +4 -0
  57. package/styles/fabric-dark.css +4 -0
  58. package/styles/fabric-lite.css +4 -0
  59. package/styles/fabric.css +4 -0
  60. package/styles/fluent-dark-lite.css +4 -0
  61. package/styles/fluent-dark.css +4 -0
  62. package/styles/fluent-lite.css +4 -0
  63. package/styles/fluent.css +4 -0
  64. package/styles/fluent2-lite.css +4 -0
  65. package/styles/fluent2.css +4 -0
  66. package/styles/highcontrast-light-lite.css +4 -0
  67. package/styles/highcontrast-light.css +4 -0
  68. package/styles/highcontrast-lite.css +4 -0
  69. package/styles/highcontrast.css +4 -0
  70. package/styles/material-dark-lite.css +4 -0
  71. package/styles/material-dark.css +4 -0
  72. package/styles/material-lite.css +4 -0
  73. package/styles/material.css +4 -0
  74. package/styles/material3-dark-lite.css +4 -0
  75. package/styles/material3-dark.css +4 -0
  76. package/styles/material3-lite.css +4 -0
  77. package/styles/material3.css +4 -0
  78. package/styles/tailwind-dark-lite.css +4 -0
  79. package/styles/tailwind-dark.css +4 -0
  80. package/styles/tailwind-lite.css +4 -0
  81. package/styles/tailwind.css +4 -0
  82. package/styles/tailwind3-lite.css +4 -0
  83. package/styles/tailwind3.css +4 -0
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 31.2.3
3
+ * version : 31.2.5
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@syncfusion/ej2-dropdowns",
3
- "version": "31.2.3",
3
+ "version": "31.2.5",
4
4
  "description": "Essential JS 2 DropDown Components",
5
5
  "author": "Syncfusion Inc.",
6
6
  "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
8
8
  "module": "./index.js",
9
9
  "es2015": "./dist/es6/ej2-dropdowns.es5.js",
10
10
  "dependencies": {
11
- "@syncfusion/ej2-base": "~31.2.2",
12
- "@syncfusion/ej2-data": "~31.2.3",
13
- "@syncfusion/ej2-inputs": "~31.2.2",
11
+ "@syncfusion/ej2-base": "~31.2.5",
12
+ "@syncfusion/ej2-data": "~31.2.5",
13
+ "@syncfusion/ej2-inputs": "~31.2.5",
14
14
  "@syncfusion/ej2-lists": "~31.2.2",
15
- "@syncfusion/ej2-navigations": "~31.2.3",
15
+ "@syncfusion/ej2-navigations": "~31.2.5",
16
16
  "@syncfusion/ej2-notifications": "~31.2.2",
17
- "@syncfusion/ej2-popups": "~31.2.2"
17
+ "@syncfusion/ej2-popups": "~31.2.5"
18
18
  },
19
19
  "devDependencies": {},
20
20
  "keywords": [
@@ -212,7 +212,9 @@ var ComboBox = /** @class */ (function (_super) {
212
212
  _this.fields.value : '', _this.value) : _this.value;
213
213
  if ((valueFieldValue === dataItem.value && _this.text !== dataItem.text.toString()) ||
214
214
  (valueFieldValue !== dataItem.value && _this.text === dataItem.text.toString())) {
215
- _this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
215
+ _this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value }, true);
216
+ _this.setHiddenValue();
217
+ Input.setValue(_this.text, _this.inputElement, _this.floatLabelType, _this.showClearButton);
216
218
  }
217
219
  }
218
220
  else if (_this.allowCustom) {
@@ -757,6 +757,11 @@ var DropDownBase = /** @class */ (function (_super) {
757
757
  if (_this.isVirtualizationEnabled && (e.count !== 0 && e.count < (_this.itemCount * 2))) {
758
758
  if (newQuery) {
759
759
  for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
760
+ if (_this.getModuleName() === 'multiselect' && _this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
761
+ newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !_this.isCustomFiltering)) {
762
+ isReOrder = false;
763
+ break;
764
+ }
760
765
  if (newQuery.queries[queryElements].fn === 'onTake') {
761
766
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
762
767
  newQuery.queries[queryElements].e.nos = e.count;
@@ -868,6 +873,11 @@ var DropDownBase = /** @class */ (function (_super) {
868
873
  listItems.count < (_this.itemCount * 2)) && !_this.appendUncheckList) {
869
874
  if (newQuery) {
870
875
  for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
876
+ if (_this.getModuleName() === 'multiselect' && _this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
877
+ newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !_this.isCustomFiltering)) {
878
+ isReOrder = false;
879
+ break;
880
+ }
871
881
  if (newQuery.queries[queryElements].fn === 'onTake') {
872
882
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
873
883
  newQuery.queries[queryElements].e.nos = listItems.count;
@@ -658,6 +658,8 @@ export declare class DropDownList extends DropDownBase implements IInput {
658
658
  protected setReadOnly(): void;
659
659
  protected setInputValue(newProp?: any, oldProp?: any): void;
660
660
  private setCssClass;
661
+ private getRightIconsWidth;
662
+ private updateFloatLabelOverflowWidth;
661
663
  /**
662
664
  * Return the module name of this component.
663
665
  *
@@ -541,6 +541,7 @@ var DropDownList = /** @class */ (function (_super) {
541
541
  this.onChangeEvent(e);
542
542
  }
543
543
  this.floatLabelChange();
544
+ this.updateFloatLabelOverflowWidth();
544
545
  this.dispatchEvent(this.hiddenElement, 'change');
545
546
  if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {
546
547
  this.dispatchEvent(this.inputElement, 'blur');
@@ -557,6 +558,12 @@ var DropDownList = /** @class */ (function (_super) {
557
558
  this.trigger('focus', args);
558
559
  }
559
560
  this.updateIconState();
561
+ if (this.floatLabelType !== 'Never' && this.inputWrapper && this.inputWrapper.container) {
562
+ var label = this.inputWrapper.container.querySelector('.e-float-text');
563
+ if (label) {
564
+ label.removeAttribute('style');
565
+ }
566
+ }
560
567
  this.isFocused = true;
561
568
  };
562
569
  DropDownList.prototype.resizingWireEvent = function () {
@@ -2386,7 +2393,7 @@ var DropDownList = /** @class */ (function (_super) {
2386
2393
  _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;
2387
2394
  });
2388
2395
  }
2389
- if (!checkVal) {
2396
+ if (!checkVal && !this.enableVirtualization) {
2390
2397
  this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_1)))
2391
2398
  .then(function (e) {
2392
2399
  if (e.result.length > 0) {
@@ -3536,6 +3543,7 @@ var DropDownList = /** @class */ (function (_super) {
3536
3543
  this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
3537
3544
  this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
3538
3545
  }
3546
+ this.updateFloatLabelOverflowWidth();
3539
3547
  this.wireEvent();
3540
3548
  this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
3541
3549
  this.element.removeAttribute('tabindex');
@@ -4105,6 +4113,24 @@ var DropDownList = /** @class */ (function (_super) {
4105
4113
  Input.setCssClass(newClass, [this.popupObj.element], oldClass);
4106
4114
  }
4107
4115
  };
4116
+ DropDownList.prototype.getRightIconsWidth = function () {
4117
+ var container = this.inputWrapper.container;
4118
+ var width = 0;
4119
+ var iconSelectors = '.e-input-group-icon, .e-clear-icon';
4120
+ var icons = container.querySelectorAll(iconSelectors);
4121
+ for (var index = 0; index < icons.length; index++) {
4122
+ width += icons[index].offsetWidth;
4123
+ }
4124
+ return width;
4125
+ };
4126
+ DropDownList.prototype.updateFloatLabelOverflowWidth = function () {
4127
+ var container = this.inputWrapper.container;
4128
+ var label = container.querySelector('.e-float-text');
4129
+ var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
4130
+ if (label && calculateWidth) {
4131
+ label.style.width = calculateWidth + 'px';
4132
+ }
4133
+ };
4108
4134
  /**
4109
4135
  * Return the module name of this component.
4110
4136
  *
@@ -420,7 +420,7 @@ var Mention = /** @class */ (function (_super) {
420
420
  : lastWordRange.replace(this.mentionChar, '');
421
421
  }
422
422
  if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
423
- this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
423
+ this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && !this.lineBreak) {
424
424
  this.searchLists(e);
425
425
  if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
426
426
  if (!this.isContentEditable(this.inputElement)) {
@@ -682,6 +682,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
682
682
  private updateListItems;
683
683
  private loadTemplate;
684
684
  private setScrollPosition;
685
+ private updatePopupHeightOnFilter;
685
686
  private focusAtFirstListItem;
686
687
  private focusAtLastListItem;
687
688
  protected getAriaAttributes(): {
@@ -956,6 +957,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
956
957
  * @returns {void}
957
958
  */
958
959
  selectAll(state: boolean): void;
960
+ private getRightIconsWidth;
961
+ private updateFloatLabelOverflowWidth;
959
962
  /**
960
963
  * Return the module name of this component.
961
964
  *
@@ -375,6 +375,27 @@ var MultiSelect = /** @class */ (function (_super) {
375
375
  this.scrollBottom(focusedItem, undefined, false, null, true);
376
376
  }
377
377
  };
378
+ MultiSelect.prototype.updatePopupHeightOnFilter = function () {
379
+ if (this.allowFiltering && this.allowResize && this.keyboardEvent) {
380
+ if (this.allowResize && this.popupObj && this.list) {
381
+ var filterText = this.inputElement && this.inputElement.value;
382
+ var filteredItems = this.list.querySelectorAll('li.e-list-item:not(.e-hide-listitem):not(.e-disabled)');
383
+ var isFiltering = filterText && filterText.length > 0;
384
+ if (isFiltering && filteredItems.length > 0) {
385
+ var itemHeight = filteredItems[0].offsetHeight;
386
+ var newHeight = filteredItems.length * itemHeight;
387
+ this.popupObj.element.style.maxHeight = newHeight + 16 + 'px';
388
+ this.list.style.maxHeight = newHeight + 'px';
389
+ }
390
+ else if (!isFiltering) {
391
+ var restoreHeight = this.resizeHeight || parseInt(this.popupHeight, 10);
392
+ this.popupObj.element.style.maxHeight = restoreHeight + 'px';
393
+ this.list.style.maxHeight = restoreHeight + 'px';
394
+ this.setResize();
395
+ }
396
+ }
397
+ }
398
+ };
378
399
  MultiSelect.prototype.focusAtFirstListItem = function (isOpen) {
379
400
  if (this.ulElement && this.ulElement.querySelector('li.'
380
401
  + dropDownBaseClasses.li)) {
@@ -1105,7 +1126,7 @@ var MultiSelect = /** @class */ (function (_super) {
1105
1126
  this.getFilteringSkeletonCount();
1106
1127
  }
1107
1128
  this.refreshPopup();
1108
- if (this.allowResize) {
1129
+ if (this.allowResize && !this.isFilteringAction) {
1109
1130
  this.setResize();
1110
1131
  }
1111
1132
  if (this.mode === 'CheckBox') {
@@ -1292,6 +1313,7 @@ var MultiSelect = /** @class */ (function (_super) {
1292
1313
  };
1293
1314
  MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {
1294
1315
  var target;
1316
+ this.updatePopupHeightOnFilter();
1295
1317
  if (this.isBlurDispatching && this.isAngular) {
1296
1318
  this.isBlurDispatching = false;
1297
1319
  return;
@@ -1372,6 +1394,7 @@ var MultiSelect = /** @class */ (function (_super) {
1372
1394
  Input.createSpanElement(this.overAllWrapper, this.createElement);
1373
1395
  }
1374
1396
  this.calculateWidth();
1397
+ this.updateFloatLabelOverflowWidth();
1375
1398
  if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
1376
1399
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
1377
1400
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
@@ -1574,6 +1597,12 @@ var MultiSelect = /** @class */ (function (_super) {
1574
1597
  this.searchWrapper.classList.remove(ZERO_SIZE);
1575
1598
  }
1576
1599
  this.checkPlaceholderSize();
1600
+ if (this.floatLabelType !== 'Never' && this.overAllWrapper) {
1601
+ var label = this.overAllWrapper.querySelector('.e-float-text');
1602
+ if (label) {
1603
+ label.removeAttribute('style');
1604
+ }
1605
+ }
1577
1606
  if (this.focused) {
1578
1607
  var args = { isInteracted: e ? true : false, event: e };
1579
1608
  this.trigger('focus', args);
@@ -1884,7 +1913,7 @@ var MultiSelect = /** @class */ (function (_super) {
1884
1913
  if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
1885
1914
  this.refreshPopup();
1886
1915
  }
1887
- if (this.allowResize) {
1916
+ if (this.allowResize && !this.isFilterAction) {
1888
1917
  this.setResize();
1889
1918
  }
1890
1919
  this.isKeyBoardAction = false;
@@ -3608,6 +3637,7 @@ var MultiSelect = /** @class */ (function (_super) {
3608
3637
  }
3609
3638
  }
3610
3639
  });
3640
+ this.updatePopupHeightOnFilter();
3611
3641
  };
3612
3642
  MultiSelect.prototype.search = function (e) {
3613
3643
  this.preventSetCurrentData = false;
@@ -3932,28 +3962,29 @@ var MultiSelect = /** @class */ (function (_super) {
3932
3962
  this.wireListEvents();
3933
3963
  };
3934
3964
  MultiSelect.prototype.initialValueUpdate = function (listItems, isInitialVirtualData) {
3965
+ var _this = this;
3935
3966
  if (this.list) {
3936
3967
  var text = void 0;
3937
3968
  var element = void 0;
3938
- var value = void 0;
3969
+ var value_2;
3939
3970
  if (this.chipCollectionWrapper) {
3940
3971
  this.chipCollectionWrapper.innerHTML = '';
3941
3972
  }
3942
3973
  this.removeListSelection();
3943
3974
  if (!isNullOrUndefined(this.value)) {
3944
3975
  for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
3945
- value = this.allowObjectBinding ?
3976
+ value_2 = this.allowObjectBinding ?
3946
3977
  getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
3947
3978
  this.value[index];
3948
- element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
3979
+ element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value_2);
3949
3980
  var isCustomData = false;
3950
3981
  if (this.enableVirtualization) {
3951
3982
  text = null;
3952
3983
  if (listItems != null && listItems.length > 0) {
3953
3984
  for (var i = 0; i < listItems.length; i++) {
3954
- if ((this.isPrimitiveData && listItems[i] === value) || (!this.isPrimitiveData
3985
+ if ((this.isPrimitiveData && listItems[i] === value_2) || (!this.isPrimitiveData
3955
3986
  && getValue((this.fields.value ? this.fields.value :
3956
- 'value'), listItems[i]) === value)) {
3987
+ 'value'), listItems[i]) === value_2)) {
3957
3988
  text = this.isPrimitiveData ? listItems[i] :
3958
3989
  getValue(this.fields.text, listItems[i]);
3959
3990
  if (this.enableVirtualization) {
@@ -3979,7 +4010,7 @@ var MultiSelect = /** @class */ (function (_super) {
3979
4010
  if ((isNullOrUndefined(text) && this.allowCustomValue) &&
3980
4011
  ((!(this.dataSource instanceof DataManager)) ||
3981
4012
  (this.dataSource instanceof DataManager && isInitialVirtualData))) {
3982
- text = this.getTextByValue(value);
4013
+ text = this.getTextByValue(value_2);
3983
4014
  isCustomData = true;
3984
4015
  }
3985
4016
  else if ((isNullOrUndefined(text) && !this.allowCustomValue) &&
@@ -3990,30 +4021,39 @@ var MultiSelect = /** @class */ (function (_super) {
3990
4021
  }
3991
4022
  }
3992
4023
  else {
3993
- text = this.getTextByValue(value);
4024
+ text = this.getTextByValue(value_2);
3994
4025
  }
3995
4026
  if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
3996
4027
  (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
3997
4028
  (this.mode === 'Box' || this.mode === 'Default'))) ||
3998
- (this.enableVirtualization && value != null && text != null && !isCustomData)) {
4029
+ (this.enableVirtualization && value_2 != null && text != null && !isCustomData)) {
3999
4030
  var currentText = [];
4000
4031
  var textValues = this.isDynamicRemoteVirtualData && text != null && text !== '' && index === 0 ? text : this.text != null && this.text !== '' && !this.text.includes(text) ? this.text + this.delimiterChar + text : text;
4001
4032
  currentText.push(textValues);
4002
4033
  this.setProperties({ text: currentText.toString() }, true);
4003
- this.addChip(text, value);
4034
+ this.addChip(text, value_2);
4004
4035
  this.addListSelection(element);
4005
4036
  }
4006
- else if ((!this.enableVirtualization && value && this.allowCustomValue) ||
4037
+ else if ((!this.enableVirtualization && value_2 && this.allowCustomValue) ||
4007
4038
  (this.enableVirtualization &&
4008
- value &&
4039
+ value_2 &&
4009
4040
  this.allowCustomValue &&
4010
4041
  ((!(this.dataSource instanceof DataManager)) ||
4011
4042
  (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
4012
4043
  var indexItem = this.listData.length;
4013
4044
  var newValue = {};
4014
- setValue(this.fields.text, value, newValue);
4015
- setValue(this.fields.value, value, newValue);
4045
+ setValue(this.fields.text, value_2, newValue);
4046
+ setValue(this.fields.value, value_2, newValue);
4016
4047
  var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
4048
+ if (newValue && this.allowObjectBinding && this.allowCustomValue && this.value.length > 0 && typeof this.value[0] === 'object') {
4049
+ var valueArray = this.value;
4050
+ var filteredItems = valueArray.filter(function (valObj) {
4051
+ return valObj[_this.fields.value] === value_2;
4052
+ });
4053
+ if (filteredItems.length > 0) {
4054
+ newValue = filteredItems[0]; // Take the first matching item
4055
+ }
4056
+ }
4017
4057
  if (!this.enableVirtualization) {
4018
4058
  this.addItem(newValue, indexItem);
4019
4059
  }
@@ -4026,7 +4066,7 @@ var MultiSelect = /** @class */ (function (_super) {
4026
4066
  }
4027
4067
  }
4028
4068
  element = element ? element : this.findListElement(this.hideSelectedItem ?
4029
- this.ulElement : this.list, 'li', 'data-value', value);
4069
+ this.ulElement : this.list, 'li', 'data-value', value_2);
4030
4070
  if (this.popupWrapper.contains(noDataEle)) {
4031
4071
  this.list.setAttribute('style', noDataEle.getAttribute('style'));
4032
4072
  this.popupWrapper.replaceChild(this.list, noDataEle);
@@ -4036,7 +4076,7 @@ var MultiSelect = /** @class */ (function (_super) {
4036
4076
  var textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
4037
4077
  currentText.push(textValues);
4038
4078
  this.setProperties({ text: currentText.toString() }, true);
4039
- this.addChip(text, value);
4079
+ this.addChip(text, value_2);
4040
4080
  this.addListSelection(element);
4041
4081
  }
4042
4082
  }
@@ -5873,6 +5913,24 @@ var MultiSelect = /** @class */ (function (_super) {
5873
5913
  this.isSelectAll = true;
5874
5914
  this.selectAllItems(state);
5875
5915
  };
5916
+ MultiSelect.prototype.getRightIconsWidth = function () {
5917
+ var container = this.overAllWrapper;
5918
+ var width = 0;
5919
+ var iconSelectors = '.e-input-group-icon, .e-clear-icon';
5920
+ var icons = container.querySelectorAll(iconSelectors);
5921
+ for (var index = 0; index < icons.length; index++) {
5922
+ width += icons[index].offsetWidth;
5923
+ }
5924
+ return width;
5925
+ };
5926
+ MultiSelect.prototype.updateFloatLabelOverflowWidth = function () {
5927
+ var container = this.overAllWrapper;
5928
+ var label = container.querySelector('.e-float-text');
5929
+ var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
5930
+ if (label && calculateWidth) {
5931
+ label.style.width = calculateWidth + 'px';
5932
+ }
5933
+ };
5876
5934
  /**
5877
5935
  * Return the module name of this component.
5878
5936
  *
@@ -6037,6 +6095,7 @@ var MultiSelect = /** @class */ (function (_super) {
6037
6095
  closest(this.element, 'fieldset').disabled) {
6038
6096
  this.enabled = false;
6039
6097
  }
6098
+ this.updateFloatLabelOverflowWidth();
6040
6099
  this.wireEvent();
6041
6100
  this.enable(this.enabled);
6042
6101
  this.enableRTL(this.enableRtl);
@@ -781,6 +781,10 @@
781
781
  display: flex;
782
782
  }
783
783
 
784
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
785
+ pointer-events: none;
786
+ }
787
+
784
788
  .e-ddl.e-input-group .e-input-value,
785
789
  .e-ddl.e-input-group .e-input-value:focus {
786
790
  font-family: inherit;
package/styles/bds.css CHANGED
@@ -916,6 +916,10 @@
916
916
  display: flex;
917
917
  }
918
918
 
919
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
920
+ pointer-events: none;
921
+ }
922
+
919
923
  .e-ddl.e-input-group .e-input-value,
920
924
  .e-ddl.e-input-group .e-input-value:focus {
921
925
  font-family: inherit;
@@ -574,6 +574,10 @@
574
574
  display: flex;
575
575
  }
576
576
 
577
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
578
+ pointer-events: none;
579
+ }
580
+
577
581
  .e-ddl.e-input-group .e-input-value,
578
582
  .e-ddl.e-input-group .e-input-value:focus {
579
583
  font-family: inherit;
@@ -649,6 +649,10 @@
649
649
  display: flex;
650
650
  }
651
651
 
652
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
653
+ pointer-events: none;
654
+ }
655
+
652
656
  .e-ddl.e-input-group .e-input-value,
653
657
  .e-ddl.e-input-group .e-input-value:focus {
654
658
  font-family: inherit;
@@ -574,6 +574,10 @@
574
574
  display: flex;
575
575
  }
576
576
 
577
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
578
+ pointer-events: none;
579
+ }
580
+
577
581
  .e-ddl.e-input-group .e-input-value,
578
582
  .e-ddl.e-input-group .e-input-value:focus {
579
583
  font-family: inherit;
@@ -649,6 +649,10 @@
649
649
  display: flex;
650
650
  }
651
651
 
652
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
653
+ pointer-events: none;
654
+ }
655
+
652
656
  .e-ddl.e-input-group .e-input-value,
653
657
  .e-ddl.e-input-group .e-input-value:focus {
654
658
  font-family: inherit;
@@ -612,6 +612,10 @@
612
612
  display: flex;
613
613
  }
614
614
 
615
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
616
+ pointer-events: none;
617
+ }
618
+
615
619
  .e-ddl.e-input-group .e-input-value,
616
620
  .e-ddl.e-input-group .e-input-value:focus {
617
621
  font-family: inherit;
@@ -691,6 +691,10 @@
691
691
  display: flex;
692
692
  }
693
693
 
694
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
695
+ pointer-events: none;
696
+ }
697
+
694
698
  .e-ddl.e-input-group .e-input-value,
695
699
  .e-ddl.e-input-group .e-input-value:focus {
696
700
  font-family: inherit;
@@ -627,6 +627,10 @@
627
627
  display: flex;
628
628
  }
629
629
 
630
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
631
+ pointer-events: none;
632
+ }
633
+
630
634
  .e-ddl.e-input-group .e-input-value,
631
635
  .e-ddl.e-input-group .e-input-value:focus {
632
636
  font-family: inherit;
@@ -716,6 +716,10 @@
716
716
  display: flex;
717
717
  }
718
718
 
719
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
720
+ pointer-events: none;
721
+ }
722
+
719
723
  .e-ddl.e-input-group .e-input-value,
720
724
  .e-ddl.e-input-group .e-input-value:focus {
721
725
  font-family: inherit;
@@ -627,6 +627,10 @@
627
627
  display: flex;
628
628
  }
629
629
 
630
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
631
+ pointer-events: none;
632
+ }
633
+
630
634
  .e-ddl.e-input-group .e-input-value,
631
635
  .e-ddl.e-input-group .e-input-value:focus {
632
636
  font-family: inherit;
@@ -631,6 +631,10 @@
631
631
  display: flex;
632
632
  }
633
633
 
634
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
635
+ pointer-events: none;
636
+ }
637
+
634
638
  .e-ddl.e-input-group .e-input-value,
635
639
  .e-ddl.e-input-group .e-input-value:focus {
636
640
  font-family: inherit;
@@ -720,6 +720,10 @@
720
720
  display: flex;
721
721
  }
722
722
 
723
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
724
+ pointer-events: none;
725
+ }
726
+
723
727
  .e-ddl.e-input-group .e-input-value,
724
728
  .e-ddl.e-input-group .e-input-value:focus {
725
729
  font-family: inherit;
@@ -716,6 +716,10 @@
716
716
  display: flex;
717
717
  }
718
718
 
719
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
720
+ pointer-events: none;
721
+ }
722
+
719
723
  .e-ddl.e-input-group .e-input-value,
720
724
  .e-ddl.e-input-group .e-input-value:focus {
721
725
  font-family: inherit;
@@ -180,6 +180,10 @@
180
180
  display: flex;
181
181
  }
182
182
 
183
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
184
+ pointer-events: none;
185
+ }
186
+
183
187
  .e-ddl.e-input-group {
184
188
  .e-input-value,
185
189
  .e-input-value:focus {
@@ -454,6 +454,10 @@
454
454
  display: flex;
455
455
  }
456
456
 
457
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
458
+ pointer-events: none;
459
+ }
460
+
457
461
  .e-ddl.e-input-group .e-input-value,
458
462
  .e-ddl.e-input-group .e-input-value:focus {
459
463
  font-family: inherit;
@@ -277,6 +277,10 @@
277
277
  display: flex;
278
278
  }
279
279
 
280
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
281
+ pointer-events: none;
282
+ }
283
+
280
284
  .e-ddl.e-input-group .e-input-value,
281
285
  .e-ddl.e-input-group .e-input-value:focus {
282
286
  font-family: inherit;
@@ -277,6 +277,10 @@
277
277
  display: flex;
278
278
  }
279
279
 
280
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
281
+ pointer-events: none;
282
+ }
283
+
280
284
  .e-ddl.e-input-group .e-input-value,
281
285
  .e-ddl.e-input-group .e-input-value:focus {
282
286
  font-family: inherit;
@@ -315,6 +315,10 @@
315
315
  display: flex;
316
316
  }
317
317
 
318
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
319
+ pointer-events: none;
320
+ }
321
+
318
322
  .e-ddl.e-input-group .e-input-value,
319
323
  .e-ddl.e-input-group .e-input-value:focus {
320
324
  font-family: inherit;
@@ -324,6 +324,10 @@
324
324
  display: flex;
325
325
  }
326
326
 
327
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
328
+ pointer-events: none;
329
+ }
330
+
327
331
  .e-ddl.e-input-group .e-input-value,
328
332
  .e-ddl.e-input-group .e-input-value:focus {
329
333
  font-family: inherit;
@@ -328,6 +328,10 @@
328
328
  display: flex;
329
329
  }
330
330
 
331
+ .e-disabled.e-ddl.e-static-clear .e-clear-icon {
332
+ pointer-events: none;
333
+ }
334
+
331
335
  .e-ddl.e-input-group .e-input-value,
332
336
  .e-ddl.e-input-group .e-input-value:focus {
333
337
  font-family: inherit;