@syncfusion/ej2-dropdowns 33.1.44 → 33.1.47

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;
     }
@@ -1561,12 +1567,25 @@ let DropDownBase = class DropDownBase extends Component {
                             this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                             let isReOrder = true;
                             if (!this.virtualSelectAll) {
+                                let newQueryWhereCount;
+                                let queryWhereCount;
                                 const newQuery = query.clone();
                                 for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                     if (newQuery.queries[queryElements].fn === 'onWhere') {
                                         isWhereExist = true;
+                                        newQueryWhereCount++;
                                     }
                                 }
+                                for (let queryElements = 0; !isNullOrUndefined(this.query) &&
+                                    queryElements < this.query.queries.length; queryElements++) {
+                                    if (this.query.queries[queryElements].fn === 'onWhere') {
+                                        isWhereExist = true;
+                                        queryWhereCount++;
+                                    }
+                                }
+                                if (queryWhereCount === newQueryWhereCount) {
+                                    isWhereExist = false;
+                                }
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 if (this.isVirtualizationEnabled && (e.count !== 0 && e.count < (this.itemCount * 2))) {
                                     if (newQuery) {
@@ -3626,6 +3645,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 +6700,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 +6769,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')) {
@@ -8058,6 +8091,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.filterDelayTime = 300;
         this.isClicked = false;
         this.documentClickContext = this.onDocumentClick.bind(this);
+        this.windowResizeContext = this.windowResize.bind(this);
         // Specifies if the checkAll method has been called
         this.isCheckAllCalled = false;
         this.isFromFilterChange = false;
@@ -8538,7 +8572,7 @@ let DropDownTree = class DropDownTree extends Component {
         EventHandler.add(this.inputWrapper, 'mousemove', this.mouseIn, this);
         EventHandler.add(this.inputWrapper, 'mouseout', this.onMouseLeave, this);
         EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        EventHandler.add(window, 'resize', this.windowResizeContext);
         const formElement = closest(this.inputWrapper, 'form');
         if (formElement) {
             EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
@@ -8574,7 +8608,7 @@ let DropDownTree = class DropDownTree extends Component {
         EventHandler.remove(this.inputWrapper, 'mousemove', this.mouseIn);
         EventHandler.remove(this.inputWrapper, 'mouseout', this.onMouseLeave);
         EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
-        EventHandler.remove(window, 'resize', this.windowResize);
+        EventHandler.remove(window, 'resize', this.windowResizeContext);
         const formElement = closest(this.inputWrapper, 'form');
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
@@ -13128,9 +13162,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 +15779,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 +15793,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 +18296,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 +19194,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 +19409,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') {
@@ -23794,6 +23843,12 @@ let Mention = class Mention extends DropDownBase {
             }
         }
         const currentRange = this.getTextRange();
+        // Pre-flight guard: close popup if mention character is no longer present
+        if (this.isPopupOpen && currentRange !== undefined && currentRange.indexOf(this.mentionChar) === -1) {
+            this.queryString = '';
+            this.hidePopup();
+            return;
+        }
         // eslint-disable-next-line security/detect-non-literal-regexp
         const mentionRegex = new RegExp(this.mentionChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s');
         const isValid = currentRange && mentionRegex.test(currentRange) ? false : true;