@syncfusion/ej2-dropdowns 23.1.36 → 23.1.38

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

@@ -565,6 +565,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 focusElement: document.activeElement });
         };
     };
+    VirtualScroll.prototype.destroy = function () {
+        this.removeEventListener();
+    };
     return VirtualScroll;
 }());
 
@@ -2954,7 +2957,17 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
         }
-        this.setSelection(previousItem, event);
+        this.PageUpDownSelection(previousItem, event);
+    };
+    DropDownList.prototype.PageUpDownSelection = function (previousItem, event) {
+        if (this.enableVirtualization) {
+            if (!isNullOrUndefined(previousItem) && ((this.getModuleName() !== 'autocomplete' && !previousItem.classList.contains('e-active')) || (this.getModuleName() === 'autocomplete' && !previousItem.classList.contains('e-item-focus')))) {
+                this.setSelection(previousItem, event);
+            }
+        }
+        else {
+            this.setSelection(previousItem, event);
+        }
     };
     DropDownList.prototype.pageDownSelection = function (steps, event, isVirtualKeyAction) {
         var list = this.getItems();
@@ -2962,7 +2975,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
         }
-        this.setSelection(previousItem, event);
+        this.PageUpDownSelection(previousItem, event);
     };
     DropDownList.prototype.unWireEvent = function () {
         if (!isNullOrUndefined(this.inputWrapper)) {
@@ -3746,6 +3759,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
             for (var i = 0; i < totalSkeletonCount; i++) {
                 var liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.enableVirtualization && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
                 var skeleton = new Skeleton({
                     shape: "Text",
                     height: "10px",
@@ -4013,6 +4029,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     _this.setFooterTemplate(popupEle);
                 }
                 document.body.appendChild(popupEle);
+                if (_this.enableVirtualization && _this.itemTemplate) {
+                    var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
+                    _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
+                }
                 if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
                     if (!_this.list.querySelector('.e-virtual-ddl-content')) {
                         _this.list.appendChild(_this.createElement('div', {
@@ -4184,7 +4204,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         this.popupObj = new Popup(element, {
             width: this.setWidth(), targetType: 'relative',
-            relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
+            relateTo: this.inputWrapper.container,
+            collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
             enableRtl: this.enableRtl, offsetX: left,
             position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
             zIndex: this.zIndex,
@@ -4339,7 +4360,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
                     if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyAction != "end" && !this.isVirtualScrolling) {
                         this.isPreventKeyAction = true;
-                        this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
+                        if (this.enableVirtualization && this.itemTemplate) {
+                            this.list.scrollTop += nextOffset;
+                        }
+                        else {
+                            this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
+                        }
                         this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
@@ -12384,7 +12410,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.popupObj = new Popup(this.popupWrapper, {
                     width: this.calcPopupWidth(), targetType: 'relative',
                     position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
-                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    relateTo: this.overAllWrapper,
+                    collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: 1,
                     enableRtl: this.enableRtl, zIndex: this.zIndex,
                     close: function () {
                         if (_this.popupObj.element.parentElement) {