@syncfusion/ej2-dropdowns 19.4.50 → 19.4.55

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

@@ -637,7 +637,7 @@ let DropDownBase = class DropDownBase extends Component {
                             }
                             this.bindChildItems(localDataArgs.result, ulElement, fields);
                             setTimeout(() => {
-                                if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
+                                if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
                                     this.updateDataList();
                                 }
                             });
@@ -723,7 +723,6 @@ let DropDownBase = class DropDownBase extends Component {
         if (this.isReact) {
             this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
         }
-        this.list.innerHTML = '';
         this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (let i = 0; i < ulElement.childElementCount; i++) {
@@ -734,10 +733,13 @@ let DropDownBase = class DropDownBase extends Component {
                 }
             }
         }
-        this.list.appendChild(ulElement);
-        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-        this.ulElement = this.list.querySelector('ul');
-        this.postRender(this.list, list, this.bindEvent);
+        if (!isNullOrUndefined(this.list)) {
+            this.list.innerHTML = '';
+            this.list.appendChild(ulElement);
+            this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+            this.ulElement = this.list.querySelector('ul');
+            this.postRender(this.list, list, this.bindEvent);
+        }
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     postRender(listElement, list, bindEvent) {
@@ -5024,13 +5026,10 @@ let DropDownTree = class DropDownTree extends Component {
             const l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             const remainContent = this.l10n.getConstant('overflowCountTemplate');
+            const totalContent = this.l10n.getConstant('totalCountTemplate');
             const remainElement = this.createElement('span', { className: REMAIN_WRAPPER });
-            // eslint-disable-next-line
-            const compiledString = compile(remainContent);
-            // eslint-disable-next-line
-            const totalCompiledString = compile(this.l10n.getConstant('totalCountTemplate'));
-            remainElement.appendChild(compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0]);
             this.overFlowWrapper.appendChild(remainElement);
+            remainElement.innerText = remainContent.replace('${count}', this.value.length.toString());
             const remainSize = remainElement.offsetWidth;
             remove(remainElement);
             if (this.showDropDownIcon) {
@@ -5112,7 +5111,7 @@ let DropDownTree = class DropDownTree extends Component {
                 }
             }
             if (remaining > 0) {
-                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, compiledString, totalCompiledString));
+                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
             }
             if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
                 addClass([remainElement], REMAIN_COUNT);
@@ -5124,19 +5123,14 @@ let DropDownTree = class DropDownTree extends Component {
         }
         this.updateDelimMode();
     }
-    updateRemainTemplate(remainElement, remaining, 
-    // eslint-disable-next-line
-    compiledString, 
-    // eslint-disable-next-line
-    totalCompiledString) {
+    updateRemainTemplate(remainElement, remaining, remainContent, totalContent) {
         if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
             this.overFlowWrapper.firstChild.nodeValue === '') {
             this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
         }
         remainElement.innerHTML = '';
-        remainElement.appendChild((this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
-            compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0] :
-            totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate)[0]);
+        remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
+            remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());
         if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {
             removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
         }
@@ -7481,7 +7475,9 @@ let ComboBox = class ComboBox extends DropDownList {
             this.removeSelection();
         }
         if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
-            this.inlineSearch();
+            setTimeout(() => {
+                this.inlineSearch();
+            });
         }
     }
     getFocusElement() {
@@ -8948,7 +8944,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         return ariaAttributes;
     }
     updateListARIA() {
-        attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+        if (!isNullOrUndefined(this.ulElement)) {
+            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+        }
         const disableStatus = (this.inputElement.disabled) ? true : false;
         attributes(this.inputElement, this.getAriaAttributes());
         if (disableStatus) {
@@ -9108,7 +9106,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
                         }
                         else {
-                            this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+                            //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
                             if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {
                                 this.l10nUpdate();
                                 addClass([this.list], dropDownBaseClasses.noData);
@@ -11076,8 +11074,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        if (this.mainList && this.ulElement && (this.mainList.childElementCount < this.ulElement.childElementCount || ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)))) {
-            this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+        if (this.mainList && this.ulElement) {
+            let isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
+            let isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
+            let isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
+            if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
+                this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+            }
         }
     }
     isValidLI(li) {
@@ -11424,11 +11427,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     wireListEvents() {
-        EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
-        EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);
-        EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);
-        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
-        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        if (!isNullOrUndefined(this.list)) {
+            EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
+            EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);
+            EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);
+            EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+            EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        }
     }
     unwireListEvents() {
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
@@ -13649,6 +13654,38 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         });
     }
     triggerDrag(args) {
+        let scrollParent;
+        let boundRect;
+        let scrollMoved = 36;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let event = args.event;
+        let wrapper;
+        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
+            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
+            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
+                || args.target.classList.contains("e-input-group")) {
+                wrapper = args.target.closest('.e-listbox-wrapper');
+            }
+            else {
+                wrapper = args.target;
+            }
+            if (this.allowFiltering) {
+                scrollParent = wrapper.querySelector('.e-list-parent');
+            }
+            else {
+                scrollParent = wrapper;
+            }
+            boundRect = scrollParent.getBoundingClientRect();
+            if ((boundRect.y + scrollParent.offsetHeight) - (event.pageY + scrollMoved) < 1) {
+                scrollParent.scrollTop = scrollParent.scrollTop + 10;
+            }
+            else if ((event.pageY - scrollMoved) - boundRect.y < 1) {
+                scrollParent.scrollTop = scrollParent.scrollTop - 10;
+            }
+        }
+        if (args.target === null) {
+            return;
+        }
         this.trigger('drag', this.getDragArgs(args));
         const listObj = this.getComponent(args.target);
         if (listObj && listObj.listData.length === 0) {