@syncfusion/ej2-querybuilder 33.1.44 → 33.1.49

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

@@ -4132,31 +4132,33 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (this.portals && this.portals.length) {
             this.clearQBTemplate();
         }
-        let qbDdlElems = this.element.querySelectorAll('.qb-dropdownlist');
-        if (!qbDdlElems || qbDdlElems.length === 0) {
-            qbDdlElems = document.querySelectorAll('.qb-dropdownlist');
-        }
-        for (i = 0; i < qbDdlElems.length; i++) {
-            const ddlElem = qbDdlElems[i];
-            const targetInput = ddlElem.tagName === 'INPUT' ? ddlElem : ddlElem.querySelector('input');
-            if (targetInput) {
-                const ddlInst = getComponent(targetInput, 'dropdownlist');
-                if (ddlInst) {
-                    if (ddlInst.close) {
-                        ddlInst.close = null;
-                    }
-                    if (ddlInst.open) {
-                        ddlInst.open = null;
-                    }
-                    if (ddlInst.change) {
-                        ddlInst.change = null;
+        const qbDdlElems = this.element.querySelectorAll('.qb-dropdownlist');
+        if (qbDdlElems && qbDdlElems.length > 0) {
+            for (i = 0; i < qbDdlElems.length; i++) {
+                const ddlElem = qbDdlElems[i];
+                if (this.element.contains(ddlElem)) {
+                    const targetInput = ddlElem.tagName === 'INPUT' ? ddlElem : ddlElem.querySelector('input');
+                    if (targetInput) {
+                        const ddlInst = getComponent(targetInput, 'dropdownlist');
+                        if (ddlInst) {
+                            if (ddlInst.close) {
+                                ddlInst.close = null;
+                            }
+                            if (ddlInst.open) {
+                                ddlInst.open = null;
+                            }
+                            if (ddlInst.change) {
+                                ddlInst.change = null;
+                            }
+                            ddlInst.destroy();
+                        }
                     }
-                    ddlInst.destroy();
                 }
             }
         }
-        const popupElement = document.querySelectorAll('.qb-dropdownlist.e-popup');
-        if (popupElement) {
+        // Cleanup orphaned popup elements
+        const popupElement = this.element.querySelectorAll('.e-popup.e-dropdownlist');
+        if (popupElement && popupElement.length > 0) {
             for (i = 0; i < popupElement.length; i++) {
                 popupElement[i].remove();
             }
@@ -4219,7 +4221,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     const parent = this.element.querySelector('#' + groupID);
                     const allContainers = parent.querySelectorAll(':scope > .e-group-body > .e-rule-list > [class*="-container"]');
                     const topLevelGroups = parent.querySelectorAll(':scope > .e-group-body > .e-rule-list > .e-group-container');
-                    if (topLevelGroups.length > 0 && groupID !== 'querybuilder_group0' && !(this.isAngular && groupID === 'ej2-querybuilder_0_group0')) {
+                    if (topLevelGroups.length > 0 && groupID !== 'querybuilder_group0' && !(this.isAngular && groupID === this.initialID + '_group0')) {
                         let lastGroupIndex = -1;
                         const lastGroup = topLevelGroups[topLevelGroups.length - 1];
                         for (let i = 0; i < allContainers.length; i++) {
@@ -4562,6 +4564,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     preRender() {
         this.element.id = this.element.id || getUniqueID('ej2-querybuilder');
+        this.initialID = this.element.id;
         this.defaultLocale = {
             StartsWith: 'Starts With',
             DoesNotStartWith: 'Does Not Start With',
@@ -5365,6 +5368,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         if (this.headerTemplate && isRoot) {
             this.isRoot = true;
         }
+        this.clearQBTemplate();
         this.reset();
         this.groupIdCounter = 1;
         this.ruleIdCounter = 0;