@syncfusion/ej2-dropdowns 29.1.38 → 29.1.41

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 (93) hide show
  1. package/dist/ej2-dropdowns.min.js +2 -2
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +54 -9
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +60 -15
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +8 -8
  12. package/src/common/incremental-search.js +1 -1
  13. package/src/common/virtual-scroll.js +14 -6
  14. package/src/drop-down-base/drop-down-base.d.ts +2 -0
  15. package/src/drop-down-base/drop-down-base.js +27 -4
  16. package/src/mention/mention.js +6 -1
  17. package/src/multi-select/multi-select.d.ts +0 -1
  18. package/src/multi-select/multi-select.js +12 -3
  19. package/styles/bds-lite.css +5 -0
  20. package/styles/bds.css +5 -0
  21. package/styles/bootstrap-dark-lite.css +5 -0
  22. package/styles/bootstrap-dark.css +5 -0
  23. package/styles/bootstrap-lite.css +12 -0
  24. package/styles/bootstrap.css +12 -0
  25. package/styles/bootstrap4-lite.css +12 -0
  26. package/styles/bootstrap4.css +12 -0
  27. package/styles/bootstrap5-dark-lite.css +12 -0
  28. package/styles/bootstrap5-dark.css +12 -0
  29. package/styles/bootstrap5-lite.css +12 -0
  30. package/styles/bootstrap5.3-lite.css +12 -0
  31. package/styles/bootstrap5.3.css +12 -0
  32. package/styles/bootstrap5.css +12 -0
  33. package/styles/drop-down-list/_bootstrap-dark-definition.scss +1 -0
  34. package/styles/drop-down-list/_bootstrap-definition.scss +1 -0
  35. package/styles/drop-down-list/_bootstrap4-definition.scss +1 -0
  36. package/styles/drop-down-list/_bootstrap5-definition.scss +1 -0
  37. package/styles/drop-down-list/_bootstrap5.3-definition.scss +1 -0
  38. package/styles/drop-down-list/_fabric-dark-definition.scss +1 -0
  39. package/styles/drop-down-list/_fabric-definition.scss +1 -0
  40. package/styles/drop-down-list/_highcontrast-definition.scss +1 -0
  41. package/styles/drop-down-list/_highcontrast-light-definition.scss +1 -0
  42. package/styles/drop-down-list/_layout.scss +20 -0
  43. package/styles/drop-down-list/bds.css +5 -0
  44. package/styles/drop-down-list/bootstrap-dark.css +5 -0
  45. package/styles/drop-down-list/bootstrap.css +12 -0
  46. package/styles/drop-down-list/bootstrap4.css +12 -0
  47. package/styles/drop-down-list/bootstrap5-dark.css +12 -0
  48. package/styles/drop-down-list/bootstrap5.3.css +12 -0
  49. package/styles/drop-down-list/bootstrap5.css +12 -0
  50. package/styles/drop-down-list/fabric-dark.css +5 -0
  51. package/styles/drop-down-list/fabric.css +10 -0
  52. package/styles/drop-down-list/fluent-dark.css +5 -0
  53. package/styles/drop-down-list/fluent.css +5 -0
  54. package/styles/drop-down-list/fluent2.css +5 -0
  55. package/styles/drop-down-list/highcontrast-light.css +5 -0
  56. package/styles/drop-down-list/highcontrast.css +10 -0
  57. package/styles/drop-down-list/material-dark.css +5 -0
  58. package/styles/drop-down-list/material.css +5 -0
  59. package/styles/drop-down-list/material3-dark.css +5 -0
  60. package/styles/drop-down-list/material3.css +5 -0
  61. package/styles/drop-down-list/tailwind-dark.css +5 -0
  62. package/styles/drop-down-list/tailwind.css +5 -0
  63. package/styles/drop-down-list/tailwind3.css +5 -0
  64. package/styles/fabric-dark-lite.css +5 -0
  65. package/styles/fabric-dark.css +5 -0
  66. package/styles/fabric-lite.css +10 -0
  67. package/styles/fabric.css +10 -0
  68. package/styles/fluent-dark-lite.css +5 -0
  69. package/styles/fluent-dark.css +5 -0
  70. package/styles/fluent-lite.css +5 -0
  71. package/styles/fluent.css +5 -0
  72. package/styles/fluent2-lite.css +5 -0
  73. package/styles/fluent2.css +5 -0
  74. package/styles/highcontrast-light-lite.css +5 -0
  75. package/styles/highcontrast-light.css +5 -0
  76. package/styles/highcontrast-lite.css +10 -0
  77. package/styles/highcontrast.css +10 -0
  78. package/styles/material-dark-lite.css +5 -0
  79. package/styles/material-dark.css +5 -0
  80. package/styles/material-lite.css +14 -0
  81. package/styles/material.css +14 -0
  82. package/styles/material3-dark-lite.css +5 -0
  83. package/styles/material3-dark.css +5 -0
  84. package/styles/material3-lite.css +5 -0
  85. package/styles/material3.css +5 -0
  86. package/styles/multi-select/_material-definition.scss +9 -0
  87. package/styles/multi-select/material.css +9 -0
  88. package/styles/tailwind-dark-lite.css +5 -0
  89. package/styles/tailwind-dark.css +5 -0
  90. package/styles/tailwind-lite.css +5 -0
  91. package/styles/tailwind.css +5 -0
  92. package/styles/tailwind3-lite.css +5 -0
  93. package/styles/tailwind3.css +5 -0
@@ -149,7 +149,7 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
149
149
  dataSource.filter((data) => {
150
150
  Array.prototype.slice.call(fieldValue).forEach((value) => {
151
151
  /* eslint-disable security/detect-object-injection */
152
- if ((type === 'object' && !data.isHeader && checkField.textContent.toString().indexOf(data[value]) !== -1 && checkField.getAttribute('data-value') === data[fields.value].toString()) ||
152
+ if ((type === 'object' && !data.isHeader && checkField.textContent.toString().indexOf(data[value]) !== -1 && data[fields.value] != null && checkField.getAttribute('data-value') === data[fields.value].toString()) ||
153
153
  (type === 'string' && checkField.textContent.toString().indexOf(data) !== -1)) {
154
154
  filterValue = type === 'object' ? data[value] : data;
155
155
  }
@@ -400,6 +400,10 @@ class VirtualScroll {
400
400
  if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {
401
401
  endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
402
402
  if (this.parent.viewPortInfo.startIndex === 0) {
403
+ const oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
404
+ if (oldUlElement) {
405
+ this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
406
+ }
403
407
  this.parent.updateVirtualReOrderList(true);
404
408
  if (this.parent.value.length < this.parent.itemCount && this.parent.value.length !== this.parent.totalItemCount) {
405
409
  const oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
@@ -440,6 +444,10 @@ class VirtualScroll {
440
444
  query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
441
445
  this.parent.appendUncheckList = true;
442
446
  this.parent.setCurrentView = false;
447
+ const oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
448
+ if (oldUlElement) {
449
+ this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
450
+ }
443
451
  this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
444
452
  isListUpdated = false;
445
453
  this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
@@ -889,6 +897,7 @@ let DropDownBase = class DropDownBase extends Component {
889
897
  this.skeletonCount = 32;
890
898
  this.isVirtualTrackHeight = false;
891
899
  this.virtualSelectAll = false;
900
+ this.isVirtualReorder = false;
892
901
  this.incrementalQueryString = '';
893
902
  this.incrementalEndIndex = 0;
894
903
  this.incrementalStartIndex = 0;
@@ -1581,7 +1590,7 @@ let DropDownBase = class DropDownBase extends Component {
1581
1590
  const newQuery = this.getQuery(eventArgs.query);
1582
1591
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1583
1592
  if (this.isVirtualizationEnabled && (listItems.count !== 0 &&
1584
- listItems.count < (this.itemCount * 2))) {
1593
+ listItems.count < (this.itemCount * 2)) && !this.appendUncheckList) {
1585
1594
  if (newQuery) {
1586
1595
  for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
1587
1596
  if (newQuery.queries[queryElements].fn === 'onTake') {
@@ -2078,7 +2087,7 @@ let DropDownBase = class DropDownBase extends Component {
2078
2087
  let oldUlElement = this.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
2079
2088
  const virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
2080
2089
  const isRemovedUlelement = false;
2081
- if (!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) {
2090
+ if ((!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) || (oldUlElement && this.isVirtualReorder && this.list.querySelector('.e-list-parent' + '.e-reorder'))) {
2082
2091
  oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
2083
2092
  }
2084
2093
  if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect')) || isRemovedUlelement) {
@@ -2174,7 +2183,9 @@ let DropDownBase = class DropDownBase extends Component {
2174
2183
  }
2175
2184
  setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
2176
2185
  const firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
2177
- this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
2186
+ if (!isNullOrUndefined(firstLi)) {
2187
+ this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
2188
+ }
2178
2189
  }
2179
2190
  getSortedDataSource(dataSource) {
2180
2191
  if (dataSource && this.sortOrder !== 'None') {
@@ -2399,7 +2410,11 @@ let DropDownBase = class DropDownBase extends Component {
2399
2410
  const group = this.element.querySelector('select>optgroup');
2400
2411
  if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {
2401
2412
  EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);
2402
- EventHandler.add(document, 'scroll', this.updateGroupFixedHeader, this);
2413
+ const elements = this.getScrollableParent();
2414
+ for (let i = 0; i < elements.length; i++) {
2415
+ const ele = elements[i];
2416
+ EventHandler.add(ele, 'scroll', this.updateGroupFixedHeader, this);
2417
+ }
2403
2418
  }
2404
2419
  if (this.getModuleName() === 'dropdownbase') {
2405
2420
  if (this.element.getAttribute('tabindex')) {
@@ -2417,6 +2432,22 @@ let DropDownBase = class DropDownBase extends Component {
2417
2432
  this.initialize(e);
2418
2433
  }
2419
2434
  }
2435
+ getScrollableParent() {
2436
+ const eleStyle = getComputedStyle(this.element);
2437
+ const scrollParents = [];
2438
+ const overflowRegex = /(auto|scroll)/;
2439
+ let parent = this.element.parentElement;
2440
+ while (parent && parent.tagName !== 'HTML') {
2441
+ const parentStyle = getComputedStyle(parent);
2442
+ if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')
2443
+ && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
2444
+ scrollParents.push(parent);
2445
+ }
2446
+ parent = parent.parentElement;
2447
+ }
2448
+ scrollParents.push(document);
2449
+ return scrollParents;
2450
+ }
2420
2451
  removeScrollEvent() {
2421
2452
  if (this.list) {
2422
2453
  EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
@@ -12575,7 +12606,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
12575
12606
  this.isBlurDispatching = false;
12576
12607
  this.isFilterPrevented = false;
12577
12608
  this.isFilteringAction = false;
12578
- this.isVirtualReorder = false;
12579
12609
  this.isValidKey = false;
12580
12610
  this.selectAllEventData = [];
12581
12611
  this.selectAllEventEle = [];
@@ -13425,7 +13455,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13425
13455
  }
13426
13456
  }
13427
13457
  }
13428
- if ((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip) && !this.isVirtualReorder) {
13458
+ if (((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip)) && !this.isVirtualReorder) {
13429
13459
  if (!isReOrder) {
13430
13460
  filterQuery.skip(this.viewPortInfo.startIndex);
13431
13461
  }
@@ -13589,10 +13619,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13589
13619
  if (this.allowObjectBinding) {
13590
13620
  const keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ?
13591
13621
  Object.keys(this.firstItem) : Object.keys(dataItem);
13622
+ const isNumberType = (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
13623
+ === 'number' && this.fields.value !== this.fields.text);
13592
13624
  // Create an empty object with predefined keys
13593
13625
  keys.forEach((key) => {
13594
13626
  emptyObject[key] = ((key === fields.value) || (key === fields.text)) ?
13595
- getValue(fields.value, dataItem) : null;
13627
+ ((key === fields.text) && isNumberType) ? getValue(fields.text, dataItem) :
13628
+ getValue(fields.value, dataItem) : null;
13596
13629
  });
13597
13630
  }
13598
13631
  dataItem = this.allowObjectBinding ? emptyObject : dataItem;
@@ -13887,6 +13920,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13887
13920
  else {
13888
13921
  this.trigger('change', eventArgs);
13889
13922
  }
13923
+ if (this.enableVirtualization && this.enableSelectionOrder && this.mode === 'CheckBox') {
13924
+ this.preventSetCurrentData = false;
13925
+ }
13890
13926
  this.updateTempValue();
13891
13927
  if (!this.changeOnBlur) {
13892
13928
  this.dispatchEvent(this.hiddenElement, 'change');
@@ -14418,6 +14454,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
14418
14454
  if (this.value && this.validateValues(this.value, temp)) {
14419
14455
  if (this.mode !== 'CheckBox') {
14420
14456
  this.value = temp;
14457
+ if (this.allowFiltering || this.allowCustomValue) {
14458
+ this.refreshListItems(null);
14459
+ }
14421
14460
  this.initialValueUpdate();
14422
14461
  }
14423
14462
  if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {
@@ -17561,6 +17600,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
17561
17600
  }
17562
17601
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
17563
17602
  updateDataSource(prop) {
17603
+ this.checkAndResetCache();
17564
17604
  if (isNullOrUndefined(this.list)) {
17565
17605
  this.renderPopup();
17566
17606
  }
@@ -23437,7 +23477,12 @@ let Mention = class Mention extends DropDownBase {
23437
23477
  if (lastNode) {
23438
23478
  range = range.cloneRange();
23439
23479
  if (this.isRTE) {
23440
- range.setStart(lastNode, lastNode.textContent.length);
23480
+ if (lastNode.nodeType === 3) {
23481
+ range.setStart(lastNode, lastNode.textContent.length);
23482
+ }
23483
+ else {
23484
+ range.setStartAfter(lastNode);
23485
+ }
23441
23486
  }
23442
23487
  else {
23443
23488
  range.setStartAfter(lastNode);