@syncfusion/ej2-dropdowns 34.2.5 → 34.2.7

package/dist/global/index.d.ts

@@ -1,3 +1,12 @@
+/*!
+*  filename: index.d.ts
+*  version : 34.2.7
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
+*  Use of this code is subject to the terms of our license.
+*  A copy of the current license can be obtained at any time by e-mailing
+*  licensing@syncfusion.com. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
 import * as _dropdowns from '@syncfusion/ej2-dropdowns';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "34.2.5",
+  "version": "34.2.7",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.2.5",
-    "@syncfusion/ej2-data": "~34.2.2",
-    "@syncfusion/ej2-inputs": "~34.2.2",
-    "@syncfusion/ej2-lists": "~34.2.2",
-    "@syncfusion/ej2-navigations": "~34.2.5",
-    "@syncfusion/ej2-notifications": "~34.2.2",
-    "@syncfusion/ej2-popups": "~34.2.4"
+    "@syncfusion/ej2-base": "~34.2.6",
+    "@syncfusion/ej2-data": "~34.2.6",
+    "@syncfusion/ej2-inputs": "~34.2.7",
+    "@syncfusion/ej2-lists": "~34.2.6",
+    "@syncfusion/ej2-navigations": "~34.2.7",
+    "@syncfusion/ej2-notifications": "~34.2.6",
+    "@syncfusion/ej2-popups": "~34.2.6"
   },
   "devDependencies": {},
   "keywords": [

package/src/auto-complete/auto-complete-model.d.ts

@@ -23,7 +23,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
     fields?: FieldSettingsModel;
 
     /**
-     * When set to ‘false’, consider the [`case-sensitive`](../../auto-complete/filtering/#case-sensitive-filtering)
+     * When set to ‘false’, consider the [`case-sensitive`](../../auto-complete/filtering#case-sensitive-filtering)
      * on performing the search to find suggestions.
      * By default consider the casing.
      *
@@ -88,7 +88,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
 
     /**
      * Determines on which filter type, the component needs to be considered on search action.
-     * The available [`FilterType`](../../auto-complete/filtering/#change-the-filter-type)
+     * The available [`FilterType`](../../auto-complete/filtering#change-the-filter-type)
      * and its supported data types are
      *
      * <table>

package/src/auto-complete/auto-complete.d.ts

@@ -37,7 +37,7 @@ export declare class AutoComplete extends ComboBox {
      */
     fields: FieldSettingsModel;
     /**
-     * When set to ‘false’, consider the [`case-sensitive`](../../auto-complete/filtering/#case-sensitive-filtering)
+     * When set to ‘false’, consider the [`case-sensitive`](../../auto-complete/filtering#case-sensitive-filtering)
      * on performing the search to find suggestions.
      * By default consider the casing.
      *
@@ -97,7 +97,7 @@ export declare class AutoComplete extends ComboBox {
     minLength: number;
     /**
      * Determines on which filter type, the component needs to be considered on search action.
-     * The available [`FilterType`](../../auto-complete/filtering/#change-the-filter-type)
+     * The available [`FilterType`](../../auto-complete/filtering#change-the-filter-type)
      * and its supported data types are
      *
      * <table>

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -244,7 +244,7 @@ export interface DropDownListModel extends DropDownBaseModel{
 
     /**
      * Triggers on typing a character in the filter bar when the
-     * [`allowFiltering`](./#allowfiltering)
+     * [`allowFiltering`](./index-default#allowfiltering)
      * is enabled.
      * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
      *

package/src/drop-down-list/drop-down-list.d.ts

@@ -349,7 +349,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     showClearButton: boolean;
     /**
      * Triggers on typing a character in the filter bar when the
-     * [`allowFiltering`](./#allowfiltering)
+     * [`allowFiltering`](./index-default#allowfiltering)
      * is enabled.
      * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
      *

package/src/drop-down-list/drop-down-list.js

@@ -624,6 +624,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.bindClearEvent();
     };
     DropDownList.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
         if (this.isPopupOpen) {
             this.popupObj.refreshPosition(this.inputWrapper.container);
         }
@@ -1423,7 +1424,8 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.onDocumentClick = function (e) {
         var target = e.target;
-        if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&
+        if (!isNullOrUndefined(target) && !(!isNullOrUndefined(this.popupObj) &&
+            closest(target, this.checkSelector(this.popupObj.element.id))) &&
             !isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.container.contains(e.target)) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
@@ -3082,7 +3084,9 @@ var DropDownList = /** @class */ (function (_super) {
                 ulElement = null;
             },
             targetExitViewport: function () {
-                _this.hidePopup();
+                if (!Browser.isDevice || (_this.allowFiltering === false && _this.isPopupOpen)) {
+                    _this.hidePopup();
+                }
             }
         });
     };

package/src/drop-down-tree/drop-down-tree-model.d.ts

@@ -50,7 +50,7 @@ export interface FieldsModel {
     parentValue?: string;
 
     /**
-     * Defines the external [`Query`](https://ej2.syncfusion.com/documentation/api/data/query/)
+     * Defines the external [`Query`](https://ej2.syncfusion.com/documentation/api/data/query)
      * that will execute along with the data processing.
      *
      * @default null
@@ -316,7 +316,7 @@ export interface DropDownTreeModel extends ComponentModel{
     /**
      * Specifies a template to render customized content for all the items.
      * If the **itemTemplate** property is set, the template content overrides the displayed item text.
-     * The property accepts [template string](https://ej2.syncfusion.com/documentation/common/template-engine/)
+     * The property accepts [template string](https://ej2.syncfusion.com/documentation/common/template-engine)
      * or HTML element ID holding the content.
      *
      * @default null
@@ -484,7 +484,7 @@ export interface DropDownTreeModel extends ComponentModel{
 
     /**
      * Specifies the way to customize the selected values in the Dropdown Tree component based on application needs. If the **valueTemplate** property is set, the template content overrides the displayed item text.
-     * The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
+     * The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
      *
      * @default null
      * @angularType string | object

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -52,7 +52,7 @@ export declare class Fields extends ChildProperty<Fields> {
      */
     parentValue: string;
     /**
-     * Defines the external [`Query`](https://ej2.syncfusion.com/documentation/api/data/query/)
+     * Defines the external [`Query`](https://ej2.syncfusion.com/documentation/api/data/query)
      * that will execute along with the data processing.
      *
      * @default null
@@ -344,6 +344,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private valueTemplateContainer;
     private previousFilterText;
     private fallbackValue;
+    private uncheckedNodeId;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.
@@ -504,7 +505,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     /**
      * Specifies a template to render customized content for all the items.
      * If the **itemTemplate** property is set, the template content overrides the displayed item text.
-     * The property accepts [template string](https://ej2.syncfusion.com/documentation/common/template-engine/)
+     * The property accepts [template string](https://ej2.syncfusion.com/documentation/common/template-engine)
      * or HTML element ID holding the content.
      *
      * @default null
@@ -652,7 +653,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     value: string[];
     /**
      * Specifies the way to customize the selected values in the Dropdown Tree component based on application needs. If the **valueTemplate** property is set, the template content overrides the displayed item text.
-     * The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
+     * The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
      *
      * @default null
      * @angularType string | object
@@ -892,10 +893,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private removeSelectedData;
     private initializeValueTemplate;
     private showOrHideValueTemplate;
-    private getFilteredTreeData;
     private getChildren;
     private getDirectChildren;
-    private restoreRootParentValues;
     private updateFilteredAutoCheckValues;
     private updateSelectedValues;
     private setChipValues;

package/src/drop-down-tree/drop-down-tree.js

@@ -178,6 +178,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.isNodeChecked = false;
         _this.isFromFilterChange = false;
         _this.fallbackValue = [];
+        _this.uncheckedNodeId = null;
         return _this;
     }
     /**
@@ -2354,6 +2355,8 @@ var DropDownTree = /** @class */ (function (_super) {
         var eventArgs = this.getEventArgs(args);
         this.trigger('select', eventArgs);
         this.isNodeChecked = args.action === 'check';
+        this.uncheckedNodeId = args.action === 'uncheck' && !isNOU(args.data[0]) ?
+            getValue('id', args.data[0]).toString() : null;
         if (this.isFilteredData && args.action === 'uncheck') {
             var id = getValue('id', args.data[0]).toString();
             this.removeSelectedData(id, true);
@@ -2386,21 +2389,8 @@ var DropDownTree = /** @class */ (function (_super) {
             this.triggerChangeEvent(this.keyEventArgs);
             this.isValueChange = false;
         }
-        if (!this.isRemoteData && !this.treeSettings.loadOnDemand) {
-            var treeData = this.treeObj.getTreeData();
-            if (this.showCheckBox && this.treeSettings.autoCheck &&
-                treeData.length > 0 && this.treeData && this.treeData.length > 0) {
-                for (var i = 0; i < treeData.length; i++) {
-                    for (var j = 0; j < this.treeData.length; j++) {
-                        if (treeData[i][this.fields.value] === this.treeData[j][this.fields.value]) {
-                            this.treeData[j].selected = treeData[i].selected !== undefined ?
-                                treeData[i].selected : false;
-                        }
-                    }
-                }
-            }
-        }
         this.updateIndeterminateNodes();
+        this.uncheckedNodeId = null;
     };
     DropDownTree.prototype.beforeCheck = function (args) {
         if (args.isInteracted) {
@@ -2694,15 +2684,13 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         }
     };
-    DropDownTree.prototype.getFilteredTreeData = function () {
-        return this.treeData;
-    };
     DropDownTree.prototype.getChildren = function (parentId, result) {
         var _this = this;
-        var treeData = this.getFilteredTreeData();
-        treeData.forEach(function (item) {
-            if (!isNOU(item) && !isNOU(item.pid) && !isNOU(item.id) && item.pid.toString() === parentId.toString()) {
-                var childId = item.id.toString();
+        this.treeData.forEach(function (item) {
+            var itemId = !isNOU(item) ? getValue(_this.fields.value, item) : null;
+            var itemPid = !isNOU(item) ? getValue(_this.fields.parentValue, item) : null;
+            if (!isNOU(itemId) && !isNOU(itemPid) && itemPid.toString() === parentId.toString()) {
+                var childId = itemId.toString();
                 if (result.indexOf(childId) === -1) {
                     result.push(childId);
                     _this.getChildren(childId, result);
@@ -2711,41 +2699,17 @@ var DropDownTree = /** @class */ (function (_super) {
         });
     };
     DropDownTree.prototype.getDirectChildren = function (parentId) {
-        return this.getFilteredTreeData()
+        var _this = this;
+        return this.treeData
             .filter(function (childNode) {
-            return !isNOU(childNode) && !isNOU(childNode.pid) && !isNOU(childNode.id) && childNode.pid.toString() === parentId;
+            var childId = !isNOU(childNode) ? getValue(_this.fields.value, childNode) : null;
+            var childPid = !isNOU(childNode) ? getValue(_this.fields.parentValue, childNode) : null;
+            return !isNOU(childId) && !isNOU(childPid) && childPid.toString() === parentId;
         })
-            .map(function (childNode) { return childNode.id.toString(); });
-    };
-    DropDownTree.prototype.restoreRootParentValues = function () {
-        var _this = this;
-        var treeData = this.getFilteredTreeData();
-        treeData.forEach(function (node) {
-            if (isNOU(node) || isNOU(node.id)) {
-                return;
-            }
-            if (isNOU(node.pid)) {
-                var rootId = node.id.toString();
-                var currentValues_1 = _this.value.map(function (item) {
-                    return item.toString();
-                });
-                if (currentValues_1.indexOf(rootId) === -1) {
-                    var childValues = [];
-                    _this.getChildren(rootId, childValues);
-                    var hasSelectedChild = childValues.some(function (childId) { return currentValues_1.indexOf(childId) !== -1; });
-                    if (hasSelectedChild) {
-                        _this.value.push(rootId);
-                    }
-                }
-            }
-        });
+            .map(function (childNode) { return getValue(_this.fields.value, childNode).toString(); });
     };
     DropDownTree.prototype.updateFilteredAutoCheckValues = function () {
         var _this = this;
-        var treeData = this.getFilteredTreeData();
-        if (!this.isNodeChecked && Array.isArray(this.value) && this.value.length > 0 && this.showCheckBox) {
-            this.restoreRootParentValues();
-        }
         var currentValues = Array.isArray(this.value) ? this.value.map(function (item) { return item.toString(); }) : [];
         var removeParent = function (parentId) {
             _this.value = _this.value.filter(function (value) { return value.toString() !== parentId; });
@@ -2756,12 +2720,14 @@ var DropDownTree = /** @class */ (function (_super) {
                     _this.value.push(value);
                 }
             });
-            treeData.forEach(function (node) {
-                if (isNOU(node) || isNOU(node.id)) {
+            this.treeData.forEach(function (node) {
+                var nodeId = isNOU(node) ? null : getValue(_this.fields.value, node);
+                var nodeHasChild = !isNOU(node) && !!_this.fields.hasChildren && getValue(_this.fields.hasChildren, node) === true;
+                if (isNOU(nodeId)) {
                     return;
                 }
-                var parentId = node.id.toString();
-                if (node.haschild && _this.value.indexOf(parentId) !== -1) {
+                var parentId = nodeId.toString();
+                if (nodeHasChild && _this.value.indexOf(parentId) !== -1) {
                     var childValues = [];
                     _this.getChildren(parentId, childValues);
                     if (_this.value.indexOf(parentId) === -1) {
@@ -2775,14 +2741,16 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 currentValues = _this.value.map(function (item) { return item.toString(); });
             });
-            treeData.forEach(function (node) {
-                if (isNOU(node) || isNOU(node.id)) {
+            this.treeData.forEach(function (node) {
+                var nodeId = isNOU(node) ? null : getValue(_this.fields.value, node);
+                var nodeHasChild = !isNOU(node) && !!_this.fields.hasChildren && getValue(_this.fields.hasChildren, node) === true;
+                if (isNOU(nodeId)) {
                     return;
                 }
-                if (!node.haschild) {
+                if (!nodeHasChild) {
                     return;
                 }
-                var parentId = node.id.toString();
+                var parentId = nodeId.toString();
                 var directChildren = _this.getDirectChildren(parentId);
                 if (!directChildren.length) {
                     return;
@@ -2816,14 +2784,19 @@ var DropDownTree = /** @class */ (function (_super) {
             return;
         }
         var removeValues = [];
-        treeData.forEach(function (node) {
-            if (isNOU(node.id)) {
+        this.treeData.forEach(function (node) {
+            var nodeId = isNOU(node) ? null : getValue(_this.fields.value, node);
+            var nodeHasChild = !isNOU(node) && !!_this.fields.hasChildren && getValue(_this.fields.hasChildren, node) === true;
+            if (isNOU(nodeId)) {
+                return;
+            }
+            if (!nodeHasChild) {
                 return;
             }
-            if (!node.haschild) {
+            var parentId = nodeId.toString();
+            if (parentId !== _this.uncheckedNodeId) {
                 return;
             }
-            var parentId = node.id.toString();
             if (currentValues.indexOf(parentId) === -1) {
                 var childValues = [];
                 _this.getChildren(parentId, childValues);
@@ -2839,18 +2812,20 @@ var DropDownTree = /** @class */ (function (_super) {
         var stabilized = false;
         var valueBeforeReconciliation = this.value.slice();
         var iterationCount = 0;
-        var maxIterations = treeData.length + 1;
+        var maxIterations = this.treeData.length + 1;
         while (!stabilized && iterationCount < maxIterations) {
             stabilized = true;
             iterationCount++;
-            treeData.forEach(function (node) {
-                if (isNOU(node) || isNOU(node.id)) {
+            this.treeData.forEach(function (node) {
+                var nodeId = isNOU(node) ? null : getValue(_this.fields.value, node);
+                var nodeHasChild = !isNOU(node) && !!_this.fields.hasChildren && getValue(_this.fields.hasChildren, node) === true;
+                if (isNOU(nodeId)) {
                     return;
                 }
-                if (!node.haschild) {
+                if (!nodeHasChild) {
                     return;
                 }
-                var parentId = node.id.toString();
+                var parentId = nodeId.toString();
                 var directChildren = _this.getDirectChildren(parentId);
                 if (!directChildren.length) {
                     return;

package/src/mention/mention.js

@@ -456,7 +456,7 @@ var Mention = /** @class */ (function (_super) {
                 ? lastWordRange.substring(lastWordRange.lastIndexOf(this.mentionChar) + 1).trim()
                 : lastWordRange.replace(this.mentionChar, '');
         }
-        if (this.queryString !== '' && e.keyCode === 8 && lastWordRange.includes(this.mentionChar) && !this.isPopupOpen &&
+        if (this.queryString !== '' && e.keyCode === 8 && lastWordRange.includes(this.mentionChar) && !this.isPopupOpen && !isNullOrUndefined(this.displayTemplate) &&
             ((typeof this.displayTemplate === 'function' ? this.displayTemplate() : this.displayTemplate)).includes(this.mentionChar)) {
             this.queryString = '';
         }

package/src/multi-select/multi-select-model.d.ts

@@ -197,8 +197,6 @@ export interface MultiSelectModel extends DropDownBaseModel{
 
     /**
      * Gets or sets the height of the popup list. By default it renders based on its list item.
-     * > For more details about the popup configuration refer to
-     * [`Popup Configuration`](../../multi-select/getting-started/#configure-the-popup-list) documentation.
      *
      * @default '300px'
      * @aspType string
@@ -207,8 +205,6 @@ export interface MultiSelectModel extends DropDownBaseModel{
 
     /**
      * Gets or sets the width of the popup list and percentage values has calculated based on input width.
-     * > For more details about the popup configuration refer to
-     * [`Popup Configuration`](../../multi-select/getting-started/#configure-the-popup-list) documentation.
      *
      * @default '100%'
      * @aspType string
@@ -426,7 +422,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
     delimiterChar?: string;
 
     /**
-     * Sets [`case sensitive`](../../multi-select/filtering/#case-sensitive-filtering)
+     * Sets [`case sensitive`](../../multi-select/filtering#case-sensitive-filtering)
      * option for filter operation.
      *
      * @default true

package/src/multi-select/multi-select.d.ts

@@ -255,8 +255,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     width: string | number;
     /**
      * Gets or sets the height of the popup list. By default it renders based on its list item.
-     * > For more details about the popup configuration refer to
-     * [`Popup Configuration`](../../multi-select/getting-started/#configure-the-popup-list) documentation.
      *
      * @default '300px'
      * @aspType string
@@ -264,8 +262,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     popupHeight: string | number;
     /**
      * Gets or sets the width of the popup list and percentage values has calculated based on input width.
-     * > For more details about the popup configuration refer to
-     * [`Popup Configuration`](../../multi-select/getting-started/#configure-the-popup-list) documentation.
      *
      * @default '100%'
      * @aspType string
@@ -461,7 +457,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     delimiterChar: string;
     /**
-     * Sets [`case sensitive`](../../multi-select/filtering/#case-sensitive-filtering)
+     * Sets [`case sensitive`](../../multi-select/filtering#case-sensitive-filtering)
      * option for filter operation.
      *
      * @default true
@@ -837,6 +833,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     protected preRender(): void;
     protected getLocaleName(): string;
     private initializeData;
+    private sanitizeData;
     private updateData;
     private initialTextUpdate;
     protected renderList(isEmptyData?: boolean): void;