feat(overlay): remove outlet from query builder

Author: wnvko

projects/igniteui-angular/query-builder/src/query-builder/query-builder-functions.spec.ts

@@ -308,14 +308,9 @@ export class QueryBuilderFunctions {
         return buttonsContainers[buttonsIndex];
     }
 
-    public static getQueryBuilderOutlet(queryBuilderElement: HTMLElement) {
-        const outlet = queryBuilderElement.querySelector(':scope > .igx-query-builder__outlet');
-        return outlet;
-    }
-
     public static getQueryBuilderSelectDropdown(queryBuilderElement: HTMLElement, index = 0) {
-        const outlet = QueryBuilderFunctions.getQueryBuilderOutlet(queryBuilderElement);
-        const selectDropdown = outlet.querySelectorAll(`.${QueryBuilderSelectors.DROP_DOWN_LIST_SCROLL}`).item(index);
+        const selectDropdown = Array.from(document.querySelectorAll(`.${QueryBuilderSelectors.DROP_DOWN_LIST_SCROLL}`))
+            .filter(item => (item as HTMLElement).checkVisibility())[index];
         return selectDropdown;
     }
 
@@ -504,8 +499,8 @@ export class QueryBuilderFunctions {
      * Click 'add condition' or 'add group' item
      */
     public static clickQueryBuilderTreeAddOption(fix: ComponentFixture<any>, index: number) {
-        const outlet = Array.from(fix.debugElement.nativeElement.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0];
-        const item = Array.from((outlet as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement;
+        const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0];
+        const item = Array.from((dropdownList as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement;
         UIInteractions.simulateClickAndSelectEvent(item)
         tick(100);
         fix.detectChanges();
@@ -751,8 +746,8 @@ export class QueryBuilderFunctions {
         QueryBuilderFunctions.clickQueryBuilderEntitySelect(fix, level);
         fix.detectChanges();
 
-        const outlet = Array.from(fix.debugElement.nativeElement.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0];
-        const item = Array.from((outlet as HTMLElement).querySelectorAll('.igx-drop-down__item'))[dropdownItemIndex] as HTMLElement;
+        const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0];
+        const item = Array.from((dropdownList as HTMLElement).querySelectorAll('.igx-drop-down__item'))[dropdownItemIndex] as HTMLElement;
         UIInteractions.simulateClickAndSelectEvent(item)
         tick();
         fix.detectChanges();
@@ -762,9 +757,9 @@ export class QueryBuilderFunctions {
         QueryBuilderFunctions.clickQueryBuilderFieldsCombo(fix, level);
         fix.detectChanges();
 
-        const outlet = Array.from(fix.debugElement.nativeElement.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0];
+        const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0];
         deselectItemIndexes.forEach(index => {
-            const item = Array.from((outlet as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement;
+            const item = Array.from((dropdownList as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement;
             UIInteractions.simulateClickAndSelectEvent(item)
             tick();
             fix.detectChanges();

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

@@ -580,13 +580,6 @@
     }
 </div>
 
-<div
-    #overlayOutlet
-    igxOverlayOutlet
-    class="igx-query-builder__outlet"
-    (pointerdown)="onOutletPointerDown($event)"
-></div>
-
 <igx-dialog
     #entityChangeDialog
     title="{{ this.resourceStrings.igx_query_builder_dialog_title }}"

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

@@ -32,7 +32,6 @@ import {
     VerticalAlignment,
     AbsoluteScrollStrategy,
     AutoPositionStrategy,
-    CloseScrollStrategy,
     ConnectedPositioningStrategy,
     IgxPickerToggleComponent,
     IgxPickerClearComponent,
@@ -106,7 +105,6 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50;
         IgxIconComponent,
         IgxInputDirective,
         IgxInputGroupComponent,
-        IgxOverlayOutletDirective,
         IgxPickerClearComponent,
         IgxPickerToggleComponent,
         IgxPrefixDirective,
@@ -360,9 +358,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     @ViewChild('expressionsContainer')
     private expressionsContainer: ElementRef;
 
-    @ViewChild('overlayOutlet', { read: IgxOverlayOutletDirective, static: true })
-    private overlayOutlet: IgxOverlayOutletDirective;
-
     @ViewChildren(IgxQueryBuilderTreeComponent)
     private innerQueries: QueryList<IgxQueryBuilderTreeComponent>;
 
@@ -528,18 +523,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         return _level;
     }
 
-    private _positionSettings = {
-        horizontalStartPoint: HorizontalAlignment.Right,
-        verticalStartPoint: VerticalAlignment.Top
-    };
-
-    private _overlaySettings: OverlaySettings = {
-        closeOnOutsideClick: false,
-        modal: false,
-        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
-        scrollStrategy: new CloseScrollStrategy()
-    };
-
     /** @hidden */
     protected isAdvancedFiltering(): boolean {
         return (this.entities?.length === 1 && !this.entities[0]?.name) ||
@@ -570,14 +553,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public ngAfterViewInit(): void {
-        this._overlaySettings.outlet = this.overlayOutlet;
-        this.entitySelectOverlaySettings.outlet = this.overlayOutlet;
-        this.fieldSelectOverlaySettings.outlet = this.overlayOutlet;
-        this.conditionSelectOverlaySettings.outlet = this.overlayOutlet;
-        this.returnFieldSelectOverlaySettings.outlet = this.overlayOutlet;
-        this.addExpressionDropDownOverlaySettings.outlet = this.overlayOutlet;
-        this.groupContextMenuDropDownOverlaySettings.outlet = this.overlayOutlet;
-
         if (this.isAdvancedFiltering() && this.entities?.length === 1) {
             this.selectedEntity = this.entities[0].name;
             if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) {
@@ -1391,14 +1366,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    /**
-     * @hidden @internal
-     */
-    public onOutletPointerDown(event) {
-        // This prevents closing the select's dropdown when clicking the scroll
-        event.preventDefault();
-    }
-
     /**
      * @hidden @internal
      */

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

@@ -52,7 +52,7 @@ describe('IgxQueryBuilder', () => {
 
       expect(queryBuilder.expressionTree).toBeUndefined();
 
-      expect(queryTreeElement.children.length).toEqual(3);
+      expect(queryTreeElement.children.length).toEqual(2);
       const bodyElement = queryTreeElement.children[0];
       expect(bodyElement).toHaveClass(QueryBuilderSelectors.QUERY_BUILDER_BODY);
       expect(bodyElement.children.length).toEqual(1);
@@ -456,9 +456,9 @@ describe('IgxQueryBuilder', () => {
       QueryBuilderFunctions.clickQueryBuilderFieldsCombo(fix);
       fix.detectChanges();
 
-      // TO DO: refactor when overlay issue is fixed
-      const outlet = fix.debugElement.queryAll(By.css(`.igx-drop-down__list-scroll`))[1].nativeElement;
-      const dropdownItems = Array.from(outlet.querySelectorAll('.igx-drop-down__item'));;
+      const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`))
+        .filter(item => (item as HTMLElement).checkVisibility())[0] as HTMLElement;
+      const dropdownItems = Array.from(dropdownList.querySelectorAll('.igx-drop-down__item'));
       expect(dropdownItems.length).toBe(5);
       expect((dropdownItems[0] as HTMLElement).innerText).toBe('Select All');
       expect((dropdownItems[1] as HTMLElement).innerText).toBe('Id');
@@ -1822,7 +1822,7 @@ describe('IgxQueryBuilder', () => {
       const actionArea = bodyElement.children[0].querySelector('.igx-query-builder__root-actions');
       expect(actionArea).toBeNull();
       expect(bodyElement.children[1].children[1].children[1].children[1].children[6].children[1]).toHaveClass(QueryBuilderSelectors.QUERY_BUILDER_TREE);
-      expect(bodyElement.children[1].children[1].children[1].children[1].children[6].children[1].children.length).toEqual(3);
+      expect(bodyElement.children[1].children[1].children[1].children[1].children[6].children[1].children.length).toEqual(2);
       const tree = bodyElement.children[1].children[1].children[1].children[1].children[6].children[1].querySelector('.igx-filter-tree__expression');
       expect(tree).toBeNull();
     }));