@syncfusion/ej2-dropdowns 23.1.41 → 23.1.43

package/dist/es6/ej2-dropdowns.es5.js

@@ -1509,6 +1509,23 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         }
         return dataSource;
     };
+    /**
+     * Return the index of item which matched with given value in data source
+     *
+     * @param {string | number | boolean} value - Specifies given value.
+     * @returns {number} Returns the index of the item.
+     */
+    DropDownBase.prototype.getIndexByValueFilter = function (value) {
+        var index;
+        var listItems = this.renderItems(this.selectData, this.fields);
+        for (var i = 0; i < listItems.children.length; i++) {
+            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
+                index = i;
+                break;
+            }
+        }
+        return index;
+    };
     /**
      * Return the index of item which matched with given value in data source
      *
@@ -2798,6 +2815,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
+        if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
+            var value_1 = this.getItemData().value;
+            var filterIndex = this.getIndexByValue(value_1);
+            if (!isNullOrUndefined(filterIndex)) {
+                this.activeIndex = filterIndex;
+            }
+        }
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
@@ -2842,6 +2866,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.setSelection(nextItem, e);
             }
         }
+        if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
+            var value_2 = this.getItemData().value;
+            var filterIndex = this.getIndexByValueFilter(value_2);
+            if (!isNullOrUndefined(filterIndex)) {
+                this.activeIndex = filterIndex;
+            }
+        }
         e.preventDefault();
     };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
@@ -3143,7 +3174,18 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(value)) {
             value = 'null';
         }
-        this.activeIndex = this.getIndexByValue(value);
+        if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
+            var filterIndex = this.getIndexByValueFilter(value);
+            if (!isNullOrUndefined(filterIndex)) {
+                this.activeIndex = filterIndex;
+            }
+            else {
+                this.activeIndex = this.getIndexByValue(value);
+            }
+        }
+        else {
+            this.activeIndex = this.getIndexByValue(value);
+        }
     };
     DropDownList.prototype.activeItem = function (li) {
         if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {
@@ -3169,6 +3211,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             detach(this.valueTempElement);
             this.inputElement.style.display = 'block';
         }
+        if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
+            this.activeIndex = this.getIndexByValueFilter(dataItem.value);
+        }
         var clearIcon = dropDownListClasses.clearIcon;
         var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
         var clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
@@ -3943,10 +3988,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_1 = this.getItemData().value;
+            var value_3 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||
-                    (getValue(_this.fields.value, data) === value_1));
+                return (((typeof data === 'string' || typeof data === 'number') && data === value_3) ||
+                    (getValue(_this.fields.value, data) === value_3));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -4660,7 +4705,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
         }
-        this.getSkeletonCount();
+        if (this.getModuleName() !== 'autocomplete' && this.totalItemCount != 0 && this.totalItemCount > (this.itemCount * 2)) {
+            this.getSkeletonCount();
+        }
         this.UpdateSkeleton();
         this.listData = currentData;
         this.updateActionCompleteDataValues(ulElement, currentData);
@@ -7560,12 +7607,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             var nodes = this.treeObj.element.querySelectorAll('li');
             var checkedNodes = this.treeObj.element.querySelectorAll('li .e-checkbox-wrapper[aria-checked=true]');
             var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
-            if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 || args.data[0].isChecked == "false")) {
+            if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 || (!isNullOrUndefined(args.data[0]) && args.data[0].isChecked === 'false'))) {
                 this.isReverseUpdate = true;
                 this.changeState(wrap, 'uncheck');
                 this.isReverseUpdate = false;
             }
-            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && (args.isInteracted || this.isCheckAllCalled || args.data[0].isChecked == "true")) {
+            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && (args.isInteracted || this.isCheckAllCalled || (!isNullOrUndefined(args.data[0]) && args.data[0].isChecked === 'true'))) {
                 this.isReverseUpdate = true;
                 this.isCheckAllCalled = false;
                 this.changeState(wrap, 'check');
@@ -8529,7 +8576,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.clearTemplate();
         this.unWireEvents();
         this.setCssClass(null, this.cssClass);
-        this.setProperties({ value: [] }, true);
         this.setProperties({ text: null }, true);
         this.treeObj.destroy();
         this.destroyFilter();
@@ -8572,6 +8618,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.overFlowWrapper = null;
         this.keyboardModule = null;
         _super.prototype.destroy.call(this);
+        this.setProperties({ value: [] }, true);
     };
     DropDownTree.prototype.destroyFilter = function () {
         if (this.filterObj) {
@@ -18333,6 +18380,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 _this.initializePopup(popupEle_1, offsetValue, left);
                 _this.checkCollision(popupEle_1);
                 popupEle_1.style.visibility = 'visible';
+                var popupLeft_1 = popupEle_1.parentElement.offsetWidth - popupEle_1.offsetWidth;
+                var popupHeight_1 = popupEle_1.offsetHeight;
                 addClass([popupEle_1], ['e-mention', 'e-popup', 'e-popup-close']);
                 if (!isNullOrUndefined(_this.list)) {
                     _this.unWireListEvents();
@@ -18361,9 +18410,23 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                             popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(coordinates_1.left.toString(), 'px;\nposition: absolute;\n display: block;');
                         }
                         else {
-                            popupEle_1.style.left = formatUnit(coordinates_1.left);
-                            popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString()));
+                            if (_this.collision.length > 0 && _this.collision.indexOf('right') > -1 && _this.collision.indexOf('bottom') === -1) {
+                                popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(popupLeft_1.toString(), 'px;\nposition: absolute;\n display: block;');
+                            }
+                            else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') === -1) {
+                                popupEle_1.style.left = formatUnit(coordinates_1.left);
+                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString()));
+                            }
+                            else if (_this.collision && _this.collision.length > 0 && _this.collision.indexOf('bottom') > -1 && _this.collision.indexOf('right') > -1) {
+                                popupEle_1.style.left = formatUnit(popupLeft_1);
+                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(popupHeight_1.toString()));
+                            }
+                            else {
+                                popupEle_1.style.left = formatUnit(coordinates_1.left);
+                                popupEle_1.style.top = formatUnit(coordinates_1.top - parseInt(_this.popupHeight.toString()));
+                            }
                             _this.isCollided = false;
+                            _this.collision = [];
                         }
                         popupEle_1.style.width = _this.popupWidth !== '100%' && !isNullOrUndefined(_this.popupWidth) ? formatUnit(_this.popupWidth) : 'auto';
                         _this.setHeight(popupEle_1);
@@ -18392,8 +18455,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     Mention.prototype.checkCollision = function (popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
             var coordinates = this.getCoordinates(this.inputElement, this.getTriggerCharPosition());
-            var collision = isCollide(popupEle, null, coordinates.left, coordinates.top);
-            if (collision.length > 0) {
+            this.collision = isCollide(popupEle, null, coordinates.left, coordinates.top);
+            if (this.collision.length > 0) {
                 popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
                 this.isCollided = true;
             }
@@ -18528,10 +18591,18 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             document.body.removeChild(div);
         }
         else {
-            coordinates = {
-                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),
-                left: rect.left + windowLeft + width
-            };
+            if (this.collision && this.collision.length > 0 && this.collision.indexOf('right') > -1 && this.collision.indexOf('bottom') === -1) {
+                coordinates = {
+                    top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10),
+                    left: rect.left + windowLeft + width
+                };
+            }
+            else {
+                coordinates = {
+                    top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),
+                    left: rect.left + windowLeft + width
+                };
+            }
         }
         return coordinates;
     };
@@ -18835,7 +18906,12 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             value = this.displayTempElement.innerHTML;
         }
         if (this.isContentEditable(this.inputElement)) {
-            return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+            if (Browser.isAndroid) {
+                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+            }
+            else {
+                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+            }
         }
         else {
             return showChar + value;