@syncfusion/ej2-dropdowns 33.1.44 → 33.1.46

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

@@ -477,7 +477,7 @@ class VirtualScroll {
             this.parent.totalItemsCount();
         }
         if (isListUpdated) {
-            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount) {
+            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount && !(this.parent.dataSource instanceof DataManager)) {
                 this.parent.viewPortInfo.endIndex = endIndex = this.parent.totalItemCount;
                 this.parent.isVirtualTrackHeight = true;
             }
@@ -1282,6 +1282,12 @@ let DropDownBase = class DropDownBase extends Component {
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
         translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||
             this.skeletonCount === 0) ? 0 : translateY;
+        const virtualElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
+        const style = virtualElement && virtualElement.style && virtualElement.style.height;
+        if (this.getModuleName() === 'multiselect' && !isNullOrUndefined(style) && style === '' &&
+            this.dataSource instanceof DataManager) {
+            translateY = 0;
+        }
         const styleText = `transform: translate(0px, ${translateY}px);`;
         return styleText;
     }
@@ -3626,6 +3632,11 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isActive = false;
             this.beforePopupOpen = false;
         }
+        // Cancel any pending debounced filtering when focus leaves the component.
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
         this.isFocused = false;
     }
     focusOutAction(e) {
@@ -6676,6 +6687,12 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else {
             this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
+            if (this.element.tagName === this.getNgDirective()) {
+                // Pre-populate id so Input.createInput/createFloatingInput can wire label.for correctly
+                const ngId = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');
+                this.element.id = ngId;
+                this.inputElement.id = ngId + '_input';
+            }
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -6739,6 +6756,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         const id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
+        if (this.element.tagName === this.getNgDirective() && !this.inputElement.id) {
+            this.inputElement.id = id + '_input';
+        }
         this.targetElement().setAttribute('tabindex', this.tabIndex);
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
             if (!this.inputElement.hasAttribute('aria-label')) {
@@ -13128,9 +13148,15 @@ function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement,
     const floatLabelElement = createElement('label', { className: FLOATTEXT });
     const id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
     element.id = id;
+    let isAngularComponent = false;
+    if (element.tagName && element.tagName.indexOf('EJS-') === 0 && inputElement.id === '' && element !== inputElement) {
+        inputElement.id = id + '_input';
+        isAngularComponent = true;
+    }
     if (!isNullOrUndefined(element.id) && element.id !== '') {
-        floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
-        floatLabelElement.setAttribute('for', element.id);
+        const labelTarget = isAngularComponent ? inputElement.id || element.id : element.id;
+        floatLabelElement.id = 'label_' + labelTarget.replace(/ /g, '_');
+        floatLabelElement.setAttribute('for', labelTarget);
         attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
     }
     if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
@@ -15739,6 +15765,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 selectedChips[0].removeAttribute('id');
                 if (!isNullOrUndefined(this.inputElement) && this.inputElement.hasAttribute('aria-activedescendant')) {
                     this.inputElement.removeAttribute('aria-activedescendant');
+                    if (!this.inputElement.hasAttribute('aria-describedby') && this.chipCollectionWrapper.id) {
+                        this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
+                    }
                 }
             }
             this.removeChipFocus();
@@ -15750,6 +15779,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             element.setAttribute('id', this.element.id + '_chip_item');
             if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
+                if (this.inputElement.hasAttribute('aria-describedby')) {
+                    this.inputElement.removeAttribute('aria-describedby');
+                }
             }
             const chipClose = element.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);
             if (chipClose) {
@@ -18250,9 +18282,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             firstItems.forEach((node) => {
                 fragment.appendChild(node.cloneNode(true));
             });
-            li.forEach((node) => {
-                fragment.appendChild(node.cloneNode(true));
-            });
+            if ((this.totalItemCount >= (this.itemCount * 2) && this.dataSource instanceof DataManager)) {
+                li.forEach((node) => {
+                    fragment.appendChild(node.cloneNode(true));
+                });
+            }
             const concatenatedNodeList = fragment.childNodes;
             if (this.virtualSelectAllData instanceof Array) {
                 while (index < length && index <= 50 && index < count) {
@@ -19146,7 +19180,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.renderItems(this.mainData, this.fields);
                     }
                     this.virtualCustomData = null;
-                    this.isVirtualTrackHeight = this.totalItemCount >= (this.itemCount * 2) ? false : true;
+                    this.isVirtualTrackHeight = (this.totalItemCount >= (this.itemCount * 2) ||
+                        this.dataSource instanceof DataManager) ? false : true;
                 }
             });
         }
@@ -19360,7 +19395,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER$1, attrs: { role: 'listbox' }
+                className: CHIP_WRAPPER$1
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {