@syncfusion/ej2-dropdowns 23.1.41 → 23.1.43-17627

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.
@@ -1509,6 +1509,23 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1509
1509
  }
1510
1510
  return dataSource;
1511
1511
  };
1512
+ /**
1513
+ * Return the index of item which matched with given value in data source
1514
+ *
1515
+ * @param {string | number | boolean} value - Specifies given value.
1516
+ * @returns {number} Returns the index of the item.
1517
+ */
1518
+ DropDownBase.prototype.getIndexByValueFilter = function (value) {
1519
+ var index;
1520
+ var listItems = this.renderItems(this.selectData, this.fields);
1521
+ for (var i = 0; i < listItems.children.length; i++) {
1522
+ if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
1523
+ index = i;
1524
+ break;
1525
+ }
1526
+ }
1527
+ return index;
1528
+ };
1512
1529
  /**
1513
1530
  * Return the index of item which matched with given value in data source
1514
1531
  *
@@ -2798,6 +2815,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2798
2815
  }
2799
2816
  };
2800
2817
  DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
2818
+ if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
2819
+ var value_1 = this.getItemData().value;
2820
+ var filterIndex = this.getIndexByValue(value_1);
2821
+ if (!isNullOrUndefined(filterIndex)) {
2822
+ this.activeIndex = filterIndex;
2823
+ }
2824
+ }
2801
2825
  var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
2802
2826
  if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
2803
2827
  this.setSelection(focusEle, e);
@@ -2842,6 +2866,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2842
2866
  this.setSelection(nextItem, e);
2843
2867
  }
2844
2868
  }
2869
+ if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
2870
+ var value_2 = this.getItemData().value;
2871
+ var filterIndex = this.getIndexByValueFilter(value_2);
2872
+ if (!isNullOrUndefined(filterIndex)) {
2873
+ this.activeIndex = filterIndex;
2874
+ }
2875
+ }
2845
2876
  e.preventDefault();
2846
2877
  };
2847
2878
  DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
@@ -3143,7 +3174,18 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3143
3174
  if (isNullOrUndefined(value)) {
3144
3175
  value = 'null';
3145
3176
  }
3146
- this.activeIndex = this.getIndexByValue(value);
3177
+ if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
3178
+ var filterIndex = this.getIndexByValueFilter(value);
3179
+ if (!isNullOrUndefined(filterIndex)) {
3180
+ this.activeIndex = filterIndex;
3181
+ }
3182
+ else {
3183
+ this.activeIndex = this.getIndexByValue(value);
3184
+ }
3185
+ }
3186
+ else {
3187
+ this.activeIndex = this.getIndexByValue(value);
3188
+ }
3147
3189
  };
3148
3190
  DropDownList.prototype.activeItem = function (li) {
3149
3191
  if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {
@@ -3169,6 +3211,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3169
3211
  detach(this.valueTempElement);
3170
3212
  this.inputElement.style.display = 'block';
3171
3213
  }
3214
+ if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
3215
+ this.activeIndex = this.getIndexByValueFilter(dataItem.value);
3216
+ }
3172
3217
  var clearIcon = dropDownListClasses.clearIcon;
3173
3218
  var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
3174
3219
  var clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
@@ -3943,10 +3988,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3943
3988
  DropDownList.prototype.addNewItem = function (listData, newElement) {
3944
3989
  var _this = this;
3945
3990
  if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
3946
- var value_1 = this.getItemData().value;
3991
+ var value_3 = this.getItemData().value;
3947
3992
  var isExist = listData.some(function (data) {
3948
- return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||
3949
- (getValue(_this.fields.value, data) === value_1));
3993
+ return (((typeof data === 'string' || typeof data === 'number') && data === value_3) ||
3994
+ (getValue(_this.fields.value, data) === value_3));
3950
3995
  });
3951
3996
  if (!isExist) {
3952
3997
  this.addItem(this.itemData);
@@ -4660,7 +4705,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4660
4705
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
4661
4706
  this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
4662
4707
  }
4663
- this.getSkeletonCount();
4708
+ if (this.getModuleName() !== 'autocomplete' && this.totalItemCount != 0 && this.totalItemCount > (this.itemCount * 2)) {
4709
+ this.getSkeletonCount();
4710
+ }
4664
4711
  this.UpdateSkeleton();
4665
4712
  this.listData = currentData;
4666
4713
  this.updateActionCompleteDataValues(ulElement, currentData);
@@ -7560,12 +7607,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
7560
7607
  var nodes = this.treeObj.element.querySelectorAll('li');
7561
7608
  var checkedNodes = this.treeObj.element.querySelectorAll('li .e-checkbox-wrapper[aria-checked=true]');
7562
7609
  var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
7563
- if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 || args.data[0].isChecked == "false")) {
7610
+ if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 || (!isNullOrUndefined(args.data[0]) && args.data[0].isChecked === 'false'))) {
7564
7611
  this.isReverseUpdate = true;
7565
7612
  this.changeState(wrap, 'uncheck');
7566
7613
  this.isReverseUpdate = false;
7567
7614
  }
7568
- else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && (args.isInteracted || this.isCheckAllCalled || args.data[0].isChecked == "true")) {
7615
+ else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && (args.isInteracted || this.isCheckAllCalled || (!isNullOrUndefined(args.data[0]) && args.data[0].isChecked === 'true'))) {
7569
7616
  this.isReverseUpdate = true;
7570
7617
  this.isCheckAllCalled = false;
7571
7618
  this.changeState(wrap, 'check');
@@ -8529,7 +8576,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8529
8576
  this.clearTemplate();
8530
8577
  this.unWireEvents();
8531
8578
  this.setCssClass(null, this.cssClass);
8532
- this.setProperties({ value: [] }, true);
8533
8579
  this.setProperties({ text: null }, true);
8534
8580
  this.treeObj.destroy();
8535
8581
  this.destroyFilter();
@@ -8572,6 +8618,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8572
8618
  this.overFlowWrapper = null;
8573
8619
  this.keyboardModule = null;
8574
8620
  _super.prototype.destroy.call(this);
8621
+ this.setProperties({ value: [] }, true);
8575
8622
  };
8576
8623
  DropDownTree.prototype.destroyFilter = function () {
8577
8624
  if (this.filterObj) {
@@ -11201,6 +11248,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11201
11248
  if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
11202
11249
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
11203
11250
  }
11251
+ this.dispatchEvent(this.inputElement, 'blur');
11204
11252
  };
11205
11253
  MultiSelect.prototype.calculateWidth = function () {
11206
11254
  var elementWidth;
@@ -18333,6 +18381,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18333
18381
  _this.initializePopup(popupEle_1, offsetValue, left);
18334
18382
  _this.checkCollision(popupEle_1);
18335
18383
  popupEle_1.style.visibility = 'visible';
18384
+ var popupLeft_1 = popupEle_1.parentElement.offsetWidth - popupEle_1.offsetWidth;
18385
+ var popupHeight_1 = popupEle_1.offsetHeight;
18336
18386
  addClass([popupEle_1], ['e-mention', 'e-popup', 'e-popup-close']);
18337
18387
  if (!isNullOrUndefined(_this.list)) {
18338
18388
  _this.unWireListEvents();
@@ -18361,9 +18411,23 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18361
18411
  popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(coordinates_1.left.toString(), 'px;\nposition: absolute;\n display: block;');
18362
18412
  }
18363
18413
  else {
18364
- popupEle_1.style.left = formatUnit(coordinates_1.left);
18365
- popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString()));
18414
+ if (_this.collision.length > 0 && _this.collision.indexOf('right') > -1 && _this.collision.indexOf('bottom') === -1) {
18415
+ popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(popupLeft_1.toString(), 'px;\nposition: absolute;\n display: block;');
18416
+ }
18417
+ else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') === -1) {
18418
+ popupEle_1.style.left = formatUnit(coordinates_1.left);
18419
+ popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString()));
18420
+ }
18421
+ else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') > -1) {
18422
+ popupEle_1.style.left = formatUnit(popupLeft_1);
18423
+ popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString()));
18424
+ }
18425
+ else {
18426
+ popupEle_1.style.left = formatUnit(coordinates_1.left);
18427
+ popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString()));
18428
+ }
18366
18429
  _this.isCollided = false;
18430
+ _this.collision = [];
18367
18431
  }
18368
18432
  popupEle_1.style.width = _this.popupWidth !== '100%' && !isNullOrUndefined(_this.popupWidth) ? formatUnit(_this.popupWidth) : 'auto';
18369
18433
  _this.setHeight(popupEle_1);
@@ -18392,8 +18456,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18392
18456
  Mention.prototype.checkCollision = function (popupEle) {
18393
18457
  if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
18394
18458
  var coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
18395
- var collision = isCollide(popupEle, null, coordinates.left, coordinates.top);
18396
- if (collision.length > 0) {
18459
+ this.collision = isCollide(popupEle, null, coordinates.left, coordinates.top);
18460
+ if (this.collision.length > 0) {
18397
18461
  popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
18398
18462
  this.isCollided = true;
18399
18463
  }
@@ -18528,10 +18592,18 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18528
18592
  document.body.removeChild(div);
18529
18593
  }
18530
18594
  else {
18531
- coordinates = {
18532
- top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),
18533
- left: rect.left + windowLeft + width
18534
- };
18595
+ if (this.collision && this.collision.length > 0 && this.collision.indexOf('right') > -1 && this.collision.indexOf('bottom') === -1) {
18596
+ coordinates = {
18597
+ top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10),
18598
+ left: rect.left + windowLeft + width
18599
+ };
18600
+ }
18601
+ else {
18602
+ coordinates = {
18603
+ top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),
18604
+ left: rect.left + windowLeft + width
18605
+ };
18606
+ }
18535
18607
  }
18536
18608
  return coordinates;
18537
18609
  };
@@ -18835,7 +18907,12 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18835
18907
  value = this.displayTempElement.innerHTML;
18836
18908
  }
18837
18909
  if (this.isContentEditable(this.inputElement)) {
18838
- return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
18910
+ if (Browser.isAndroid) {
18911
+ return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
18912
+ }
18913
+ else {
18914
+ return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
18915
+ }
18839
18916
  }
18840
18917
  else {
18841
18918
  return showChar + value;