@syncfusion/ej2-dropdowns 24.1.45 → 24.1.46

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

@@ -4677,9 +4677,16 @@ let DropDownList = class DropDownList extends DropDownBase {
     scrollHandler() {
         if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&
             !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {
-            this.hidePopup();
+            if (this.element && !(this.isElementInViewport(this.element))) {
+                this.hidePopup();
+            }
         }
     }
+    isElementInViewport(element) {
+        var elementRect = element.getBoundingClientRect();
+        return (elementRect.top >= 0 && elementRect.left >= 0 && elementRect.bottom <= window.innerHeight && elementRect.right <= window.innerWidth);
+    }
+    ;
     setSearchBoxPosition() {
         const searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;
         this.popupObj.element.style.maxHeight = '100%';
@@ -5811,7 +5818,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!this.enabled) {
             return;
         }
-        if (!this.enableVirtualization && this.getModuleName() === 'combobox') {
+        if (!this.enableVirtualization && (this.getModuleName() === 'combobox' || this.getModuleName() === 'autocomplete')) {
             this.isTyped = true;
         }
         this.hidePopup(e);
@@ -6236,7 +6243,6 @@ let DropDownTree = class DropDownTree extends Component {
             const popupDiv = select('#' + this.element.id + '_options', document);
             detach(popupDiv ? popupDiv : isTree.parentElement);
         }
-        this.ensureAutoCheck();
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNullOrUndefined(this.inputEle.getAttribute('role'))) {
@@ -6323,11 +6329,6 @@ let DropDownTree = class DropDownTree extends Component {
             || this.noRecordsTemplate || this.customTemplate;
         this.renderComplete();
     }
-    ensureAutoCheck() {
-        if (this.allowFiltering && this.treeSettings.autoCheck) {
-            this.setProperties({ treeSettings: { autoCheck: false } }, true);
-        }
-    }
     hideCheckAll(flag) {
         const checkAllEle = !isNullOrUndefined(this.popupEle) ? this.popupEle.querySelector('.' + CHECKALLPARENT) : null;
         if (!isNullOrUndefined(checkAllEle)) {
@@ -6364,9 +6365,20 @@ let DropDownTree = class DropDownTree extends Component {
             this.filterTimer = window.setTimeout(() => { this.filterHandler(args.value, args.event); }, this.filterDelayTime);
         }
     }
+    isChildObject() {
+        if (typeof this.treeObj.fields.child === 'object') {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
     filterHandler(value, event) {
         this.isFromFilterChange = true;
         if (!this.isFilteredData) {
+            if (this.isRemoteData) {
+                this.treeObj.expandedNodes = [];
+            }
             this.treeData = this.treeObj.getTreeData();
         }
         const filterFields = this.cloneFields(this.fields);
@@ -6396,6 +6408,10 @@ let DropDownTree = class DropDownTree extends Component {
                     }
                     else {
                         if (this.fields.dataSource instanceof DataManager) {
+                            fields = this.remoteDataFilter(value, args.fields);
+                            fields.child = this.fields.child;
+                            this.treeObj.fields = this.getTreeFields(args.fields);
+                            this.treeObj.dataBind();
                             flag = true;
                         }
                         else {
@@ -6407,6 +6423,14 @@ let DropDownTree = class DropDownTree extends Component {
                 if (flag) {
                     return;
                 }
+                if (this.isRemoteData) {
+                    if (this.isChildObject()) {
+                        fields.child = this.fields.child;
+                    }
+                    else {
+                        fields = args.fields;
+                    }
+                }
                 this.treeObj.fields = this.getTreeFields(fields);
                 this.treeObj.dataBind();
                 if (this.hasTemplate && this.portals && this.treeObj.portals) {
@@ -6422,6 +6446,33 @@ let DropDownTree = class DropDownTree extends Component {
             }
         });
     }
+    remoteDataFilter(value, filteredFields) {
+        filteredFields.dataSource = this.treeData.map(item => this.remoteChildFilter(value, item)).filter(filteredChild => !isNullOrUndefined(filteredChild));
+        return filteredFields;
+    }
+    remoteChildFilter(value, node, isChild, isChildFiltering) {
+        let children = this.isChildObject() ? node['child'] : node[this.fields.child];
+        if (isNullOrUndefined(children)) {
+            return (this.isMatchedNode(value, node, isChild, isChildFiltering)) ? node : null;
+        }
+        let matchedChildren = [];
+        for (let i = 0; i < children.length; i++) {
+            let filteredChild = this.remoteChildFilter(value, children[i], true, true);
+            if (!isNullOrUndefined(filteredChild)) {
+                matchedChildren.push(filteredChild);
+            }
+        }
+        let filteredItems = Object.assign({}, node);
+        isChildFiltering = false;
+        if (matchedChildren.length !== 0) {
+            filteredItems.child = matchedChildren;
+        }
+        else {
+            filteredItems.child = null;
+            filteredItems = (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;
+        }
+        return filteredItems;
+    }
     nestedFilter(value, filteredFields) {
         // eslint-disable-next-line
         const matchedDataSource = [];
@@ -6503,8 +6554,17 @@ let DropDownTree = class DropDownTree extends Component {
         return filteredFields;
     }
     // eslint-disable-next-line
-    isMatchedNode(value, node) {
-        let checkValue = node[this.fields.text];
+    isMatchedNode(value, node, isChild, isChildFiltering) {
+        let checkValue;
+        let isObjectValue = isChild && isChildFiltering && this.isChildObject();
+        checkValue = isObjectValue ? node[this.fields.child.text] : node[this.fields.text];
+        if (!checkValue) {
+            let tempChild = this.fields.child;
+            while (!node[tempChild.text]) {
+                tempChild = tempChild.child;
+            }
+            checkValue = node[tempChild.text];
+        }
         if (this.ignoreCase) {
             checkValue = checkValue.toLowerCase();
             value = value.toLowerCase();
@@ -7459,8 +7519,6 @@ let DropDownTree = class DropDownTree extends Component {
         if (this.isFilteredData) {
             this.filterObj.value = '';
             this.treeObj.fields = this.getTreeFields(this.fields);
-            if (this.isReact)
-                this.refresh();
             this.isFilterRestore = true;
             this.isFilteredData = false;
             this.hideCheckAll(false);
@@ -7481,12 +7539,18 @@ let DropDownTree = class DropDownTree extends Component {
                 }
                 else {
                     this.popupEle = this.popupObj.element;
+                    if (this.isReact && this.isFilterRestore) {
+                        this.treeObj.refresh();
+                        this.isFilteredData = true;
+                        this.popupEle.removeChild(this.filterContainer);
+                    }
                 }
             }
             else {
                 isCancelled = true;
             }
-            if (this.isFirstRender && !isCancelled) {
+            if (this.isFirstRender && !isCancelled || this.isFilteredData) {
+                this.isFilteredData = false;
                 prepend([this.popupDiv], this.popupEle);
                 removeClass([this.popupDiv], DDTHIDEICON);
                 if (this.allowFiltering) {
@@ -7852,6 +7916,9 @@ let DropDownTree = class DropDownTree extends Component {
             if (this.value === null) {
                 this.setProperties({ value: [] }, true);
             }
+            if (args.node.classList.contains("e-active")) {
+                this.hidePopup();
+            }
         }
     }
     updateHiddenValue() {
@@ -8510,7 +8577,6 @@ let DropDownTree = class DropDownTree extends Component {
     updateTreeSettings(prop) {
         const value = Object.keys(prop.treeSettings)[0];
         if (value === 'autoCheck') {
-            this.ensureAutoCheck();
             this.treeObj.autoCheck = this.treeSettings.autoCheck;
         }
         else if (value === 'loadOnDemand') {
@@ -8631,7 +8697,6 @@ let DropDownTree = class DropDownTree extends Component {
                 this.destroyFilter();
             }
         }
-        this.ensureAutoCheck();
     }
     updateFilterPlaceHolder() {
         if (this.filterObj) {
@@ -14546,10 +14611,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!args.cancel) {
                 if (!this.ulElement) {
                     this.beforePopupOpen = true;
-                    super.render(e);
                     if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                         this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                     }
+                    super.render(e);
                     return;
                 }
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
@@ -18303,7 +18368,8 @@ let Mention = class Mention extends DropDownBase {
             return;
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
-        if (document.activeElement != this.inputElement) {
+        const isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
+        if (document.activeElement != this.inputElement && !isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -19169,6 +19235,12 @@ let Mention = class Mention extends DropDownBase {
             if (this.isPopupOpen) {
                 this.hidePopup();
             }
+            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action. 
+            if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {
+                const event = new CustomEvent('content-changed', { detail: { click: true } });
+                this.inputElement.dispatchEvent(event);
+            }
+            
             this.onChangeEvent(e);
         }
         else {