@syncfusion/ej2-dropdowns 23.1.36 → 23.1.39

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

@@ -506,6 +506,9 @@ class VirtualScroll {
                 focusElement: document.activeElement });
         };
     }
+    destroy() {
+        this.removeEventListener();
+    }
 }
 
 /**
@@ -2848,7 +2851,17 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
         }
-        this.setSelection(previousItem, event);
+        this.PageUpDownSelection(previousItem, event);
+    }
+    PageUpDownSelection(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);
+        }
     }
     pageDownSelection(steps, event, isVirtualKeyAction) {
         const list = this.getItems();
@@ -2856,7 +2869,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         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);
     }
     unWireEvent() {
         if (!isNullOrUndefined(this.inputWrapper)) {
@@ -3014,6 +3027,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass([focusedItem], dropDownBaseClasses.focus);
         }
         li.setAttribute('aria-selected', 'true');
+        if (isNullOrUndefined(value)) {
+            value = 'null';
+        }
         this.activeIndex = this.getIndexByValue(value);
     }
     activeItem(li) {
@@ -3637,6 +3653,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             const totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
             for (let i = 0; i < totalSkeletonCount; i++) {
                 const liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.enableVirtualization && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
                 let skeleton = new Skeleton({
                     shape: "Text",
                     height: "10px",
@@ -3898,6 +3917,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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', {
@@ -4067,7 +4090,8 @@ let DropDownList = class DropDownList extends DropDownBase {
     createPopup(element, offsetValue, left) {
         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,
@@ -4220,7 +4244,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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;
@@ -4555,7 +4584,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.inputElement.parentElement.insertBefore(this.element, this.inputElement);
         }
         this.hiddenElement = this.createElement('select', {
-            attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }
+            attrs: { 'aria-hidden': 'true', 'aria-label': this.getModuleName(), 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }
         });
         prepend([this.hiddenElement], this.inputWrapper.container);
         this.validationAttribute(this.element, this.hiddenElement);
@@ -12157,7 +12186,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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: () => {
                         if (this.popupObj.element.parentElement) {