@syncfusion/ej2-querybuilder 33.2.3 → 33.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.3
+*  version : 33.2.4
 *  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-querybuilder",
-  "version": "33.2.3",
+  "version": "33.2.4",
   "description": "Essential JS 2 QueryBuilder",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,9 +10,9 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~33.2.3",
     "@syncfusion/ej2-buttons": "~33.2.3",
-    "@syncfusion/ej2-calendars": "~33.2.3",
-    "@syncfusion/ej2-dropdowns": "~33.2.3",
-    "@syncfusion/ej2-inputs": "~33.2.3",
+    "@syncfusion/ej2-calendars": "~33.2.4",
+    "@syncfusion/ej2-dropdowns": "~33.2.4",
+    "@syncfusion/ej2-inputs": "~33.2.4",
     "@syncfusion/ej2-splitbuttons": "~33.2.3"
   },
   "devDependencies": {},

package/src/query-builder/query-builder.d.ts

@@ -355,6 +355,8 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private initialID;
     private ddTree;
     private boundResizeHandler;
+    private isPopupScroll;
+    private boundScrollHandler;
     /**
      * Triggers when the component is created.
      *
@@ -776,6 +778,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private templateParser;
     private executeDataManager;
     private initControl;
+    private scrollEventHandler;
     protected wireEvents(): void;
     protected unWireEvents(): void;
     private getParentGroup;

package/src/query-builder/query-builder.js

@@ -222,6 +222,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.isRuleClicked = false;
         _this.groupCloned = false;
         _this.isRequestSent = false;
+        _this.isPopupScroll = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -1358,6 +1359,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.renderToolTip = function (element) {
+        var _this = this;
         var tooltip = new Tooltip({
             content: this.l10n.getConstant('ValidationMessage'),
             position: 'BottomCenter', cssClass: 'e-querybuilder-error', afterClose: function () {
@@ -1367,6 +1369,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (tooltipCloseElement) {
                     tooltipCloseElement.style.display = 'none';
                 }
+            }, beforeClose: function (args) {
+                if (_this.isPopupScroll) {
+                    args.cancel = true;
+                }
             }
         });
         tooltip.appendTo(element);
@@ -4989,6 +4995,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                     groupRule = groupRule.properties;
                 }
                 var groupElem = closest(targetGroup, '.e-group-container');
+                var cloneGroupElem = groupElem.cloneNode(true);
+                var isRuleArea = false;
+                if (closest(e.target, '.e-group-container') && closest(e.target, '.e-group-container').id === this.initialID + '_group0') {
+                    isRuleArea = true;
+                }
                 var nestGrpElem = groupElem.querySelectorAll('.e-group-container');
                 nestGrpElem.forEach(function (ele) {
                     if (_this.element.querySelector('#' + ele.id)) {
@@ -5006,11 +5017,25 @@ var QueryBuilder = /** @class */ (function (_super) {
                     ruleIds.push(ruleElems[i].id.split(this.element.id + '_')[1]);
                 }
                 this.deleteRules(ruleIds);
+                // Calculate index considering both groups and rules in the overall rules collection
+                var overallDropIndex = 0;
+                var ruleListElem = cloneGroupElem.querySelector('.e-rule-list');
+                if (ruleListElem) {
+                    var droppedElement = void 0;
+                    for (var j = 0; j < ruleListElem.children.length; j++) {
+                        var child = ruleListElem.children[j];
+                        if (child.classList.contains('e-drag-rule-top-line') || child.classList.contains('e-drag-rule-bottom-line')) {
+                            droppedElement = child;
+                            overallDropIndex = j;
+                            break;
+                        }
+                    }
+                }
                 if (targetGroup.classList.contains('e-drag-rule-top-line')) {
-                    groupRule.rules.splice(dropInd, 0, rule);
+                    groupRule.rules.splice(isRuleArea ? overallDropIndex : dropInd, 0, rule);
                 }
                 else {
-                    groupRule.rules.splice(dropInd + 1, 0, rule);
+                    groupRule.rules.splice(isRuleArea ? overallDropIndex + 1 : dropInd + 1, 0, rule);
                 }
                 groupRule.rules.forEach(function (rule) {
                     if (_this.enableSeparateConnector) {
@@ -5210,12 +5235,24 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.initWrapper();
         this.wireEvents();
     };
+    QueryBuilder.prototype.scrollEventHandler = function (e) {
+        var target = e.target;
+        if (target && ((target.closest && target.closest('.e-popup')))) {
+            this.isPopupScroll = true;
+        }
+        else {
+            this.isPopupScroll = false;
+        }
+    };
     QueryBuilder.prototype.wireEvents = function () {
         var wrapper = this.getWrapper();
         EventHandler.add(wrapper, 'click', this.clickEventHandler, this);
         EventHandler.add(wrapper, 'focusout', this.focusEventHandler, this);
         EventHandler.add(wrapper, 'focusin', this.focusEventHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
+        this.boundScrollHandler = this.scrollEventHandler.bind(this);
+        document.addEventListener('wheel', this.boundScrollHandler);
+        document.addEventListener('scroll', this.boundScrollHandler);
         if (this.allowDragAndDrop) {
             EventHandler.add(document, 'keydown', this.keyBoardHandler, this);
         }
@@ -5228,6 +5265,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         EventHandler.remove(wrapper, 'focusout', this.focusEventHandler);
         EventHandler.remove(wrapper, 'focusin', this.focusEventHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
+        document.removeEventListener('wheel', this.boundScrollHandler);
+        document.removeEventListener('scroll', this.boundScrollHandler);
+        this.boundScrollHandler = null;
         EventHandler.remove(document, 'keydown', this.keyBoardHandler);
         if (this.boundResizeHandler) {
             window.removeEventListener('resize', this.boundResizeHandler);