@syncfusion/ej2-dropdowns 24.2.8 → 24.2.9

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 (54) hide show
  1. package/CHANGELOG.md +8 -0
  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 +66 -28
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +67 -28
  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 +7 -7
  13. package/src/combo-box/combo-box-model.d.ts +1 -1
  14. package/src/combo-box/combo-box.js +29 -2
  15. package/src/drop-down-base/drop-down-base.d.ts +1 -0
  16. package/src/drop-down-base/drop-down-base.js +1 -1
  17. package/src/drop-down-list/drop-down-list.d.ts +0 -1
  18. package/src/drop-down-list/drop-down-list.js +33 -24
  19. package/src/mention/mention.js +5 -1
  20. package/styles/bootstrap-dark.css +1 -1
  21. package/styles/bootstrap.css +1 -1
  22. package/styles/bootstrap4.css +1 -1
  23. package/styles/bootstrap5-dark.css +1 -1
  24. package/styles/bootstrap5.css +1 -1
  25. package/styles/drop-down-list/_layout.scss +1 -1
  26. package/styles/drop-down-list/bootstrap-dark.css +1 -1
  27. package/styles/drop-down-list/bootstrap.css +1 -1
  28. package/styles/drop-down-list/bootstrap4.css +1 -1
  29. package/styles/drop-down-list/bootstrap5-dark.css +1 -1
  30. package/styles/drop-down-list/bootstrap5.css +1 -1
  31. package/styles/drop-down-list/fabric-dark.css +1 -1
  32. package/styles/drop-down-list/fabric.css +1 -1
  33. package/styles/drop-down-list/fluent-dark.css +1 -1
  34. package/styles/drop-down-list/fluent.css +1 -1
  35. package/styles/drop-down-list/highcontrast-light.css +1 -1
  36. package/styles/drop-down-list/highcontrast.css +1 -1
  37. package/styles/drop-down-list/material-dark.css +1 -1
  38. package/styles/drop-down-list/material.css +1 -1
  39. package/styles/drop-down-list/material3-dark.css +1 -1
  40. package/styles/drop-down-list/material3.css +1 -1
  41. package/styles/drop-down-list/tailwind-dark.css +1 -1
  42. package/styles/drop-down-list/tailwind.css +1 -1
  43. package/styles/fabric-dark.css +1 -1
  44. package/styles/fabric.css +1 -1
  45. package/styles/fluent-dark.css +1 -1
  46. package/styles/fluent.css +1 -1
  47. package/styles/highcontrast-light.css +1 -1
  48. package/styles/highcontrast.css +1 -1
  49. package/styles/material-dark.css +1 -1
  50. package/styles/material.css +1 -1
  51. package/styles/material3-dark.css +1 -1
  52. package/styles/material3.css +1 -1
  53. package/styles/tailwind-dark.css +1 -1
  54. package/styles/tailwind.css +1 -1
@@ -1152,7 +1152,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1152
1152
  _this.trigger('actionComplete', e, function (e) {
1153
1153
  if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
1154
1154
  _this.isRemoteDataUpdated = true;
1155
- if ((_this.getModuleName() === 'combobox' && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
1155
+ if ((_this.getModuleName() === 'combobox' && !_this.initialRemoteRender && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
1156
1156
  e.result = e.result.result;
1157
1157
  }
1158
1158
  if (e.result.length > 0) {
@@ -2367,7 +2367,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2367
2367
  this.isFilterFocus = false;
2368
2368
  this.beforePopupOpen = false;
2369
2369
  this.initial = true;
2370
- this.initRemoteRender = false;
2370
+ this.initialRemoteRender = false;
2371
2371
  this.isNotSearchList = false;
2372
2372
  this.isTyped = false;
2373
2373
  this.isSelected = false;
@@ -2658,7 +2658,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2658
2658
  this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
2659
2659
  this.renderList();
2660
2660
  if (this.dataSource instanceof DataManager) {
2661
- this.initRemoteRender = true;
2661
+ this.initialRemoteRender = true;
2662
2662
  }
2663
2663
  else {
2664
2664
  this.updateValues();
@@ -3637,7 +3637,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3637
3637
  }
3638
3638
  };
3639
3639
  DropDownList.prototype.setSelection = function (li, e) {
3640
- var _this = this;
3641
3640
  if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
3642
3641
  && li.classList.contains(dropDownBaseClasses.selected)))) {
3643
3642
  this.updateSelectedItem(li, e, false, true);
@@ -3646,17 +3645,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3646
3645
  this.setSelectOptions(li, e);
3647
3646
  if (this.enableVirtualization) {
3648
3647
  var fields = (this.fields.value) ? this.fields.value : '';
3649
- if (this.dataSource instanceof DataManager) {
3650
- this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', this.value)))
3651
- .then(function (e) {
3652
- if (e.result.length > 0) {
3653
- _this.itemData = e.result[0];
3654
- var dataItem = _this.getItemData();
3655
- if ((_this.value === dataItem.value && _this.text !== dataItem.text) || (_this.value !== dataItem.value && _this.text === dataItem.text)) {
3656
- _this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
3657
- }
3648
+ if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
3649
+ var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
3650
+ if (getItem && getItem.length > 0) {
3651
+ this.itemData = getItem[0];
3652
+ var dataItem = this.getItemData();
3653
+ if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
3654
+ this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
3658
3655
  }
3659
- });
3656
+ }
3660
3657
  }
3661
3658
  else {
3662
3659
  var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
@@ -4313,10 +4310,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4313
4310
  if (!isNullOrUndefined(ulElement)) {
4314
4311
  attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
4315
4312
  }
4316
- if (this.initRemoteRender) {
4313
+ if (this.initialRemoteRender) {
4317
4314
  this.initial = true;
4318
4315
  this.activeIndex = this.index;
4319
- this.initRemoteRender = false;
4316
+ this.initialRemoteRender = false;
4320
4317
  if (this.value && this.dataSource instanceof DataManager) {
4321
4318
  var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
4322
4319
  var fieldValue_1 = this.fields.value.split('.');
@@ -4324,6 +4321,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4324
4321
  return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
4325
4322
  _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value;
4326
4323
  });
4324
+ if (this.enableVirtualization && this.virtualGroupDataSource) {
4325
+ checkVal = this.virtualGroupDataSource.some(function (x) {
4326
+ return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
4327
+ _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value;
4328
+ });
4329
+ }
4327
4330
  if (!checkVal) {
4328
4331
  this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))
4329
4332
  .then(function (e) {
@@ -4640,6 +4643,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4640
4643
  _this.getFocusElement();
4641
4644
  _this.checkCollision(popupEle);
4642
4645
  if (Browser.isDevice) {
4646
+ if ((parseInt(_this.popupWidth.toString(), 10) > window.outerWidth) && !(_this.getModuleName() === 'dropdownlist' && _this.allowFiltering)) {
4647
+ _this.popupObj.element.classList.add('e-wide-popup');
4648
+ }
4643
4649
  _this.popupObj.element.classList.add(dropDownListClasses.device);
4644
4650
  if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'
4645
4651
  && !_this.allowFiltering && _this.isDropDownClick)) {
@@ -5154,8 +5160,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5154
5160
  }
5155
5161
  }
5156
5162
  });
5157
- if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
5158
- this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
5163
+ if (Browser.isDevice && !eventArgs.cancel && this.popupObj.element.classList.contains('e-wide-popup')) {
5164
+ this.popupObj.element.classList.remove('e-wide-popup');
5159
5165
  }
5160
5166
  var dataSourceCount;
5161
5167
  if (this.dataSource instanceof DataManager) {
@@ -5583,11 +5589,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5583
5589
  }
5584
5590
  if (!this_1.list) {
5585
5591
  if (this_1.dataSource instanceof DataManager) {
5586
- this_1.initRemoteRender = true;
5592
+ this_1.initialRemoteRender = true;
5587
5593
  }
5588
5594
  this_1.renderList();
5589
5595
  }
5590
- if (!this_1.initRemoteRender) {
5596
+ if (!this_1.initialRemoteRender) {
5591
5597
  var li = this_1.getElementByText(newProp.text);
5592
5598
  if (!this_1.checkValidLi(li)) {
5593
5599
  if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -5636,11 +5642,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5636
5642
  this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
5637
5643
  if (!this_1.list) {
5638
5644
  if (this_1.dataSource instanceof DataManager) {
5639
- this_1.initRemoteRender = true;
5645
+ this_1.initialRemoteRender = true;
5640
5646
  }
5641
5647
  this_1.renderList();
5642
5648
  }
5643
- if (!this_1.initRemoteRender) {
5649
+ if (!this_1.initialRemoteRender) {
5644
5650
  var item = this_1.getElementByValue(newProp.value);
5645
5651
  if (!this_1.checkValidLi(item)) {
5646
5652
  if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -5680,11 +5686,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5680
5686
  }
5681
5687
  if (!this_1.list) {
5682
5688
  if (this_1.dataSource instanceof DataManager) {
5683
- this_1.initRemoteRender = true;
5689
+ this_1.initialRemoteRender = true;
5684
5690
  }
5685
5691
  this_1.renderList();
5686
5692
  }
5687
- if (!this_1.initRemoteRender && this_1.liCollections) {
5693
+ if (!this_1.initialRemoteRender && this_1.liCollections) {
5688
5694
  var element = this_1.liCollections[newProp.index];
5689
5695
  if (!this_1.checkValidLi(element)) {
5690
5696
  if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -5851,6 +5857,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5851
5857
  }
5852
5858
  else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
5853
5859
  this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
5860
+ if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
5861
+ this.isSecondClick = false;
5862
+ }
5854
5863
  this.renderList(e);
5855
5864
  }
5856
5865
  if (this.enableVirtualization && this.listData && this.listData.length) {
@@ -6057,7 +6066,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
6057
6066
  DropDownList.prototype.getItems = function () {
6058
6067
  if (!this.list) {
6059
6068
  if (this.dataSource instanceof DataManager) {
6060
- this.initRemoteRender = true;
6069
+ this.initialRemoteRender = true;
6061
6070
  }
6062
6071
  this.renderList();
6063
6072
  }
@@ -9599,13 +9608,39 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
9599
9608
  ComboBox.prototype.updateValues = function () {
9600
9609
  if (!isNullOrUndefined(this.value)) {
9601
9610
  var li = this.getElementByValue(this.value);
9611
+ var isExistItem = !isNullOrUndefined(li) ? true : false;
9612
+ if (this.enableVirtualization && this.value) {
9613
+ var fields = (this.fields.value) ? this.fields.value : '';
9614
+ if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
9615
+ var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
9616
+ if (getItem && getItem.length > 0) {
9617
+ this.itemData = getItem[0];
9618
+ isExistItem = true;
9619
+ var dataItem = this.getItemData();
9620
+ if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
9621
+ this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
9622
+ }
9623
+ }
9624
+ }
9625
+ else {
9626
+ var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
9627
+ if (getItem && getItem.length > 0) {
9628
+ this.itemData = getItem[0];
9629
+ isExistItem = true;
9630
+ var dataItem = this.getItemData();
9631
+ if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
9632
+ this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
9633
+ }
9634
+ }
9635
+ }
9636
+ }
9602
9637
  if (li) {
9603
9638
  this.setSelection(li, null);
9604
9639
  }
9605
- else if (this.allowCustom) {
9640
+ else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {
9606
9641
  this.valueMuteChange(this.value);
9607
9642
  }
9608
- else {
9643
+ else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {
9609
9644
  this.valueMuteChange(null);
9610
9645
  }
9611
9646
  }
@@ -18826,7 +18861,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18826
18861
  this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
18827
18862
  (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
18828
18863
  this.range.startContainer.nodeType === 1))) {
18829
- if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
18864
+ if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
18830
18865
  && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
18831
18866
  (this.list && this.list.querySelectorAll('ul').length > 0)) {
18832
18867
  this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
@@ -19334,6 +19369,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
19334
19369
  this.popupObj.element.removeAttribute('style');
19335
19370
  this.popupObj.element.removeAttribute('aria-disabled');
19336
19371
  }
19372
+ if (this.list.classList.contains('e-nodata')) {
19373
+ this.list = null;
19374
+ }
19337
19375
  };
19338
19376
  Mention.prototype.onDocumentClick = function (e) {
19339
19377
  var target = e.target;
@@ -19444,6 +19482,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
19444
19482
  return coordinates;
19445
19483
  };
19446
19484
  Mention.prototype.initValue = function () {
19485
+ this.isDataFetched = false;
19447
19486
  this.renderList();
19448
19487
  if (this.dataSource instanceof DataManager) {
19449
19488
  this.initRemoteRender = true;