@syncfusion/ej2-dropdowns 19.4.54 → 20.1.47

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

@@ -5579,6 +5579,7 @@ let DropDownTree = class DropDownTree extends Component {
             nodeSelecting: this.onBeforeSelect.bind(this),
             nodeTemplate: this.itemTemplate
         });
+        this.treeObj.root = this.root ? this.root : this;
         this.treeObj.appendTo('#' + this.tree.id);
     }
     /* To render the popup element */
@@ -6454,6 +6455,9 @@ let DropDownTree = class DropDownTree extends Component {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (e) {
                 return compile(template);
@@ -11079,7 +11083,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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;
+                //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
+                this.mainList = this.ulElement;
             }
         }
     }
@@ -13654,6 +13659,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) {
@@ -14347,6 +14384,11 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 });
                 this.list.setAttribute('aria-activedescendant', li.id);
             }
+            else {
+                selectedLi.forEach((ele) => {
+                    ele.setAttribute('aria-selected', 'false');
+                });
+            }
             if (!isKey && (this.maximumSelectionLength > (this.value && this.value.length) || !isSelect) &&
                 (this.maximumSelectionLength >= (this.value && this.value.length) || !isSelect) &&
                 !(this.maximumSelectionLength < (this.value && this.value.length))) {
@@ -14856,6 +14898,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 }
             }
             removeClass([fli], 'e-focused');
+            if (e.ctrlKey && !e.shiftKey && !this.selectionSettings.showCheckbox) {
+                removeClass([fli], 'e-selected');
+            }
         }
         const cli = ul.children[fliIdx];
         if (cli) {
@@ -14866,9 +14911,21 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
             ul.children[fliIdx].focus();
             ul.children[fliIdx].classList.add('e-focused');
-            if (!e.ctrlKey) {
+            if (!e.ctrlKey || !this.selectionSettings.showCheckbox && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
                 this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
             }
+            if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
+                let selectedidx = Array.prototype.indexOf.call(ul.children, fli);
+                let sidx = e.code === "Home" ? 0 : selectedidx;
+                let eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
+                for (let i = sidx; i <= eidx; i++) {
+                    const item = ul.children[i];
+                    this.notify('updatelist', { li: item, e: {
+                            target: this.ulElement.getElementsByClassName('e-focused')[0],
+                            ctrlKey: e.ctrlKey, shiftKey: e.shiftKey
+                        }, module: 'listbox' });
+                }
+            }
         }
     }
     KeyUp(e) {