@syncfusion/ej2-dropdowns 34.2.2 → 34.2.4

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

@@ -10192,6 +10192,17 @@ let DropDownTree = class DropDownTree extends Component {
             this.triggerChangeEvent(this.keyEventArgs);
             this.isValueChange = false;
         }
+        const treeData = this.treeObj.getTreeData();
+        if (this.showCheckBox && this.treeSettings.autoCheck && treeData.length > 0 && this.treeData && this.treeData.length > 0) {
+            for (let i = 0; i < treeData.length; i++) {
+                for (let j = 0; j < this.treeData.length; j++) {
+                    if (treeData[i].id === this.treeData[j].id) {
+                        this.treeData[j].selected = treeData[i].selected !== undefined ?
+                            treeData[i].selected : false;
+                    }
+                }
+            }
+        }
     }
     beforeCheck(args) {
         if (args.isInteracted) {
@@ -10503,8 +10514,31 @@ let DropDownTree = class DropDownTree extends Component {
             .filter((childNode) => !isNullOrUndefined(childNode) && !isNullOrUndefined(childNode.pid) && !isNullOrUndefined(childNode.id) && childNode.pid.toString() === parentId)
             .map((childNode) => childNode.id.toString());
     }
+    restoreRootParentValues() {
+        const treeData = this.getFilteredTreeData();
+        treeData.forEach((node) => {
+            if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
+                return;
+            }
+            if (isNullOrUndefined(node.pid)) {
+                const rootId = node.id.toString();
+                const currentValues = this.value.map((item) => item.toString());
+                if (currentValues.indexOf(rootId) === -1) {
+                    const childValues = [];
+                    this.getChildren(rootId, childValues);
+                    const hasSelectedChild = childValues.some((childId) => currentValues.indexOf(childId) !== -1);
+                    if (hasSelectedChild) {
+                        this.value.push(rootId);
+                    }
+                }
+            }
+        });
+    }
     updateFilteredAutoCheckValues() {
         const treeData = this.getFilteredTreeData();
+        if (!this.isNodeChecked && Array.isArray(this.value) && this.value.length > 0 && this.showCheckBox) {
+            this.restoreRootParentValues();
+        }
         let currentValues = Array.isArray(this.value) ? this.value.map((item) => item.toString()) : [];
         const removeParent = (parentId) => {
             this.value = this.value.filter((value) => value.toString() !== parentId);
@@ -10593,24 +10627,44 @@ let DropDownTree = class DropDownTree extends Component {
             this.value = this.value.filter((value) => removeValues.indexOf(value.toString()) === -1);
             currentValues = this.value.map((item) => item.toString());
         }
-        treeData.forEach((node) => {
-            if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
-                return;
-            }
-            if (!node.haschild) {
-                return;
-            }
-            const parentId = node.id.toString();
-            if (currentValues.indexOf(parentId) === -1) {
-                return;
-            }
-            const hasDirectChild = treeData.some((childNode) => !isNullOrUndefined(childNode) && !isNullOrUndefined(childNode.pid) && !isNullOrUndefined(childNode.id) && childNode.pid.toString() === parentId &&
-                currentValues.indexOf(childNode.id.toString()) !== -1);
-            if (!hasDirectChild) {
-                removeParent(parentId);
-                currentValues = this.value.map((item) => item.toString());
-            }
-        });
+        let stabilized = false;
+        const valueBeforeReconciliation = [...this.value];
+        let iterationCount = 0;
+        const maxIterations = treeData.length + 1;
+        while (!stabilized && iterationCount < maxIterations) {
+            stabilized = true;
+            iterationCount++;
+            treeData.forEach((node) => {
+                if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
+                    return;
+                }
+                if (!node.haschild) {
+                    return;
+                }
+                const parentId = node.id.toString();
+                const directChildren = this.getDirectChildren(parentId);
+                if (!directChildren.length) {
+                    return;
+                }
+                const allDirectChildrenChecked = directChildren.every((childId) => currentValues.indexOf(childId) !== -1);
+                if (allDirectChildrenChecked) {
+                    if (currentValues.indexOf(parentId) === -1) {
+                        this.value.push(parentId);
+                        currentValues = this.value.map((item) => item.toString());
+                        stabilized = false;
+                    }
+                }
+                else if (currentValues.indexOf(parentId) !== -1) {
+                    removeParent(parentId);
+                    currentValues = this.value.map((item) => item.toString());
+                    stabilized = false;
+                }
+            });
+        }
+        if ((valueBeforeReconciliation.length > 0 && this.value.length === 0) ||
+            iterationCount >= maxIterations) {
+            this.value = valueBeforeReconciliation;
+        }
     }
     updateSelectedValues() {
         this.dataValue = '';
@@ -13750,7 +13804,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!eventArgs.cancel) {
                 this.focusAtFirstListItem(true);
                 if (this.popupObj) {
-                    document.body.appendChild(this.popupObj.element);
+                    const appendToElement = this.getAppendToElement();
+                    appendToElement.appendChild(this.popupObj.element);
                 }
                 if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
                     this.updateListItems(this.list.querySelectorAll('li.e-list-item'), this.mainList.querySelectorAll('li.e-list-item'));
@@ -14327,6 +14382,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.onPopupShown(e);
         }
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            const popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     refreshSelection() {
         let value;
         let element;
@@ -15903,7 +15968,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 const listUl = this.list && this.list.querySelector('ul');
                 const isFullList = this.isReact && this.itemTemplate && listUl != null &&
-                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length && !this.groupTemplate;
+                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length && !this.groupTemplate && this.mode !== 'CheckBox';
                 this.onActionComplete(isFullList ? listUl : list, this.mainData);
             }
             this.focusAtLastListItem(data);
@@ -16801,7 +16866,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         if (!this.popupObj) {
             if (!isNullOrUndefined(this.popupWrapper)) {
-                document.body.appendChild(this.popupWrapper);
+                const appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(this.popupWrapper);
                 const checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
                 if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
                     checkboxFilter.remove();
@@ -19823,8 +19889,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 const mainLiLength = this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
                 const liLength = this.ulElement.querySelectorAll('li.'
                     + dropDownBaseClasses.li + '.' + HIDE_LIST).length;
+                const isFilterText = this.allowFiltering && !isNullOrUndefined(this.inputElement) &&
+                    this.inputElement.value.trim() !== '';
+                const isRemoteData = this.dataSource instanceof DataManager;
                 if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === this.mainData.length) &&
-                    !(this.targetElement() !== '' && this.allowCustomValue)) {
+                    !(this.targetElement() !== '' && this.allowCustomValue) && (!isRemoteData || !isFilterText)) {
                     this.beforePopupOpen = false;
                     return;
                 }
@@ -20249,7 +20318,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const listParentHeight = formatUnit(this.popupHeight);
         listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
         listParent.appendChild(item);
-        document.body.appendChild(listParent);
+        const appendToElement = this.getAppendToElement();
+        appendToElement.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
         const listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
@@ -23512,15 +23582,17 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     KeyUp(e) {
-        if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
+        if (this.allowFiltering && ((e.ctrlKey && e.keyCode === 65) || e.keyCode === 16)) {
             e.preventDefault();
             return;
         }
         const isSpecialKey = e.keyCode >= 186 && e.keyCode <= 192;
+        const isBracketKey = e.keyCode === 219 || e.keyCode === 220 || e.keyCode === 221 || e.keyCode === 222;
         const isNumericKeyPadSpecialKey = e.keyCode === 107 || e.keyCode === 109 || e.keyCode === 111;
         const isWordCharacter = e.key && e.key.match(/\w/);
-        const isWordAccentCharacter = e.key && e.key.match(/[A-Za-z0-9\u00C0-\u024F ,>/:;\-+=]/);
-        if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter) || isSpecialKey || isNumericKeyPadSpecialKey) {
+        const isWordAccentCharacter = e.key && e.key.match(/[A-Za-z0-9\u00C0-\u024F ,>/:;\-+=[\]\\ '@!#$%^&*()]/);
+        if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter)
+            || isSpecialKey || isBracketKey || isNumericKeyPadSpecialKey) {
             this.isValidKey = true;
         }
         this.isBackSpace = e.keyCode === 8;
@@ -25551,11 +25623,12 @@ let Mention = class Mention extends DropDownBase {
             value = this.displayTempElement.innerHTML;
         }
         if (this.isContentEditable(this.inputElement)) {
-            const defaultSuffix = this.isRTE ? '&#8203;' : '';
+            const isMozilla = Browser.info.name === 'mozilla';
+            const defaultSuffix = this.isRTE || isMozilla ? '&#8203;' : '';
             if (Browser.isAndroid) {
                 return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : defaultSuffix);
             }
-            else if (Browser.info.name === 'mozilla') {
+            else if (isMozilla) {
                 return '<span>&#65279;<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>&#65279;</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : defaultSuffix);
             }
             else {