fix(query-builder): exit edit mode on chip/add button click

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

@@ -209,7 +209,7 @@
                 <div igxDragIgnore class="igx-filter-tree__expression-actions">
                     <button #addExpressionButton igxDragIgnore igxIconButton="flat" [igxDropDownItemNavigation]="addOptionsDropDown"
                     aria-labelledby="add-expression" (keydown)="invokeClick($event)"
-                        (click)="openExpressionAdd(expressionItem, addExpressionButton)"
+                        (click)="clickExpressionAdd(expressionItem, addExpressionButton)"
                         (blur)="addExpressionBlur()">
                         <igx-icon id="add-expression">add</igx-icon>
                     </button>

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -14,9 +14,9 @@ import {
     Component, Input, ViewChild, ChangeDetectorRef, ViewChildren, QueryList, ElementRef, OnDestroy, HostBinding
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { filter, fromEvent, map, retry, sampleTime, Subject, Subscription } from 'rxjs';
+import { filter, fromEvent, sampleTime, Subject, Subscription } from 'rxjs';
 import { IButtonGroupEventArgs, IgxButtonGroupComponent } from '../buttonGroup/buttonGroup.component';
-import { IBaseChipEventArgs, IChipEnterDragAreaEventArgs, IgxChipComponent } from '../chips/chip.component';
+import { IgxChipComponent } from '../chips/chip.component';
 import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from '../core/i18n/query-builder-resources';
 import { PlatformUtil } from '../core/utils';
 import { DataType, DataUtil } from '../data-operations/data-util';
@@ -54,8 +54,8 @@ import { IgxTooltipDirective } from '../directives/tooltip/tooltip.directive';
 import { IgxTooltipTargetDirective } from '../directives/tooltip/tooltip-target.directive';
 import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives';
 import { IgxQueryBuilderComponent } from './query-builder.component';
-import { IChipsAreaReorderEventArgs, IgxChipsAreaComponent } from "../chips/chips-area.component";
-import { IgxDragDirective, IgxDragIgnoreDirective, IgxDragHandleDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from '../directives/drag-drop/drag-drop.directive';
+import { IgxChipsAreaComponent } from "../chips/chips-area.component";
+import { IgxDragDirective, IgxDragIgnoreDirective, IgxDragHandleDirective, IgxDropDirective } from '../directives/drag-drop/drag-drop.directive';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
 import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component';
 import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
@@ -262,7 +262,11 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
             this._selectedReturnFields = [];
         }
 
-        this.init();
+        if(!this._preventInit) {
+            this.init();
+
+            this._preventInit = false;
+        }
     }
 
     /**
@@ -506,6 +510,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     private _currentGroupButtonsContainer: ElementRef;
     private _addModeExpression: ExpressionOperandItem;
     private _editedExpression: ExpressionOperandItem;
+    private _preventInit = false;
     private _prevFocusedContainer: ElementRef;
     private _selectedGroups: ExpressionGroupItem[] = [];
     private _expandedExpressions: IFilteringExpression[] = [];
@@ -744,7 +749,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-    public addCondition(parent: ExpressionGroupItem, afterExpression?: ExpressionItem) {
+    public addCondition(parent: ExpressionGroupItem, afterExpression?: ExpressionOperandItem) {
         this.cancelOperandAdd();
 
         const operandItem = new ExpressionOperandItem({
@@ -965,6 +970,10 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public onChipRemove(expressionItem: ExpressionItem) {
+        if(this._editedExpression) {
+            this.exitOperandEdit();
+            this.cancelOperandAdd();
+        }
         this.deleteItem(expressionItem);
     }
 
@@ -991,6 +1000,10 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
     //When we pick up a chip
     public onMoveStart(sourceDragElement: HTMLElement, sourceExpressionItem: ExpressionItem): void {
+        if(this._editedExpression) {
+            this.exitOperandEdit();
+            this.cancelOperandAdd();
+        }
         //console.log('Picked up:', event, sourceDragElement);
         this.resetDragAndDrop(true);
         this.sourceExpressionItem = sourceExpressionItem;
@@ -1412,9 +1425,73 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public enterExpressionEdit(expressionItem: ExpressionOperandItem) {
-        this.exitOperandEdit();
-        this.cancelOperandAdd();
+        if (this._editedExpression) {
+            this.exitOperandEdit();
+            this.cancelOperandAdd();
 
+            this._preventInit = true;
+        }
+        this.cdr.detectChanges();
+        this.enterEditMode(expressionItem);
+    }
+
+
+    /**
+     * @hidden @internal
+     */
+    public clickExpressionAdd(expressionItem: ExpressionOperandItem, targetButton: HTMLElement) {
+        if (this._editedExpression) {
+            this.exitOperandEdit();
+            this.cancelOperandAdd();
+
+            this._preventInit = true;
+        }
+        this.cdr.detectChanges();
+        this.openExpressionAddDialog(expressionItem, targetButton);
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public openExpressionAddDialog(expressionItem: ExpressionOperandItem, targetButton: HTMLElement) {
+        this.addExpressionDropDownOverlaySettings.target = targetButton;
+        this.addExpressionDropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy({
+            horizontalDirection: HorizontalAlignment.Right,
+            horizontalStartPoint: HorizontalAlignment.Right,
+            verticalStartPoint: VerticalAlignment.Bottom
+        });
+
+        this.addExpressionItemDropDown.open(this.addExpressionDropDownOverlaySettings);
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public enterExpressionAdd(event: ISelectionEventArgs, expressionItem: ExpressionOperandItem) {
+        if (this._addModeExpression) {
+            this._addModeExpression.inAddMode = false;
+        }
+
+        if (this.parentExpression) {
+            this.inEditModeChange.emit(this.parentExpression);
+        }
+
+        const parent = expressionItem.parent ?? this.rootGroup;
+        requestAnimationFrame(() => {
+            if (event.newSelection.value === 'addCondition') {
+                this.addCondition(parent, expressionItem);
+            } else if (event.newSelection.value === 'addGroup') {
+                this.addReverseGroup(parent, expressionItem);
+            }
+            expressionItem.inAddMode = true;
+            this._addModeExpression = expressionItem;
+        })
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public enterEditMode(expressionItem: ExpressionOperandItem) {
         if (this._editedExpression) {
             this._editedExpression.inEditMode = false;
         }
@@ -1457,7 +1534,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
             this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
         }
 
-
         if (!this.selectedField) {
             this.fieldSelect.input.nativeElement.focus();
         } else if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) {
@@ -1468,46 +1544,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-
-    /**
-     * @hidden @internal
-     */
-    public openExpressionAdd(expressionItem: ExpressionOperandItem, targetButton: HTMLElement) {
-        this.exitOperandEdit();
-
-        this.addExpressionDropDownOverlaySettings.target = targetButton;
-        this.addExpressionDropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy({
-            horizontalDirection: HorizontalAlignment.Right,
-            horizontalStartPoint: HorizontalAlignment.Right,
-            verticalStartPoint: VerticalAlignment.Bottom
-        });
-        this.addExpressionItemDropDown.open(this.addExpressionDropDownOverlaySettings);
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public enterExpressionAdd(event: ISelectionEventArgs, expressionItem: ExpressionOperandItem) {
-        if (this._addModeExpression) {
-            this._addModeExpression.inAddMode = false;
-        }
-
-        if (this.parentExpression) {
-            this.inEditModeChange.emit(this.parentExpression);
-        }
-
-        const parent = expressionItem.parent ?? this.rootGroup;
-        requestAnimationFrame(() => {
-            if (event.newSelection.value === 'addCondition') {
-                this.addCondition(parent, expressionItem);
-            } else if (event.newSelection.value === 'addGroup') {
-                this.addReverseGroup(parent, expressionItem);
-            }
-            expressionItem.inAddMode = true;
-            this._addModeExpression = expressionItem;
-        })
-    }
-
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts

@@ -78,7 +78,7 @@ export class IgxQueryBuilderComponent implements OnDestroy {
             this._fields = fields;
             this.entities = [
                 {
-                    name: null, 
+                    name: null,
                     fields: fields
                 }
             ];