Merge pull request #7619 from IgniteUI/ibarakov/fix-7072-master

kdinev · web-flow · commit 7c8aa3d4e814 · 2020-06-22T14:58:40.000+03:00
Use IgxSelect instead of IgxDropdown #7072
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -387,7 +387,7 @@
         align-items: center;
         padding: 0 rem(16px);
 
-        igx-input-group {
+        igx-select {
             flex-grow: 1;
             flex-basis: 40%;
             margin: rem(16px) 0;
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html
@@ -1,37 +1,18 @@
-<igx-drop-down
-    #dropdownConditions
-    [maxHeight]="'200px'"
-    [width]="getInputWidth()"
-    [displayDensity]="displayDensity"
-    (onSelection)="onConditionsChanged($event)">
-    <igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{ translateCondition(condition) }}</span>
-    </igx-drop-down-item>
-</igx-drop-down>
-
-<igx-input-group
-    #inputGroupConditions
-    (click)="toggleCustomDialogDropDown()"
-    type="box"
-    [displayDensity]="displayDensity">
-
+<igx-select #dropdownConditions
+        type="box"
+        [displayDensity]="displayDensity"
+        [placeholder]="conditionsPlaceholder"
+        (onSelection)="onConditionsChanged($event)"
+        [overlaySettings]="dropDownOverlaySettings">
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
-
-    <input
-        igxInput
-        (keydown)="onInputConditionsKeyDown($event)"
-        tabindex="0"
-        [igxDropDownItemNavigation]="dropdownConditions"
-        [placeholder]="inputConditionsPlaceholder"
-        autocomplete="off"
-        [value]="getConditionName(expressionUI.expression.condition)"
-        [readonly]="true"
-    />
-</igx-input-group>
+    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
+        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+        <span>{{translateCondition(condition)}}</span>
+    </igx-select-item>
+</igx-select>
 
 <igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outletDirective">
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
@@ -76,3 +57,8 @@
         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
     </span>
 </igx-buttongroup>
+
+<div #overlayOutlet
+     igxOverlayOutlet
+     (pointerdown)="onOutletPointerDown($event)">
+</div>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html
@@ -1,37 +1,18 @@
-<igx-drop-down
-    #dropdownConditions
-    [maxHeight]="'200px'"
-    [width]="getInputWidth()"
-    [displayDensity]="displayDensity"
-    (onSelection)="onConditionsChanged($event)">
-    <igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{ translateCondition(condition) }}</span>
-    </igx-drop-down-item>
-</igx-drop-down>
-
-<igx-input-group
-    #inputGroupConditions
-    (click)="toggleCustomDialogDropDown()"
-    type="box"
-    [displayDensity]="displayDensity">
-
+<igx-select #dropdownConditions
+        type="box"
+        [displayDensity]="displayDensity"
+        [placeholder]="conditionsPlaceholder"
+        (onSelection)="onConditionsChanged($event)"
+        [overlaySettings]="dropDownOverlaySettings">
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
-
-    <input
-        igxInput
-        (keydown)="onInputConditionsKeyDown($event)"
-        [igxDropDownItemNavigation]="dropdownConditions"
-        tabindex="0"
-        [placeholder]="inputConditionsPlaceholder"
-        autocomplete="off"
-        [value]="getConditionName(expressionUI.expression.condition)"
-        [readonly]="true"
-    />
-</igx-input-group>
+    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
+        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+        <span>{{translateCondition(condition)}}</span>
+    </igx-select-item>
+</igx-select>
 
 <igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity">
     <input
@@ -74,3 +55,8 @@
         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
     </span>
 </igx-buttongroup>
+
+<div #overlayOutlet
+     igxOverlayOutlet
+     (pointerdown)="onOutletPointerDown($event)">
+</div>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts
@@ -11,14 +11,15 @@ import {
 import { IgxColumnComponent } from '../../columns/column.component';
 import { ExpressionUI } from '../grid-filtering.service';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
-import { IgxDropDownItemComponent, IgxDropDownComponent } from '../../../drop-down/public_api';
-import { IgxInputGroupComponent, IgxInputDirective } from '../../../input-group/public_api';
 import { DataType, DataUtil } from '../../../data-operations/data-util';
 import { IFilteringOperation } from '../../../data-operations/filtering-condition';
-import { OverlaySettings, ConnectedPositioningStrategy, CloseScrollStrategy } from '../../../services/public_api';
+import { OverlaySettings, ConnectedPositioningStrategy, AbsoluteScrollStrategy  } from '../../../services/public_api';
 import { KEYS, IBaseEventArgs } from '../../../core/utils';
 import { FilteringLogic } from '../../../data-operations/filtering-expression.interface';
 import { DisplayDensity } from '../../../core/density';
+import { IgxSelectComponent } from '../../../select/select.component';
+import { IgxOverlayOutletDirective } from '../../../directives/toggle/toggle.directive';
+import { IgxInputDirective } from '../../../input-group/public_api';
 
 /**
  * @hidden
@@ -39,11 +40,11 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs {
 })
 export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
 
-    private _dropDownOverlaySettings: OverlaySettings = {
-        closeOnOutsideClick: true,
+    public dropDownOverlaySettings: OverlaySettings = {
+        scrollStrategy: new AbsoluteScrollStrategy(),
         modal: false,
-        positionStrategy: new ConnectedPositioningStrategy(),
-        scrollStrategy: new CloseScrollStrategy()
+        closeOnOutsideClick: true,
+        excludePositionTarget: true
     };
 
     @Input()
@@ -67,21 +68,17 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     @Output()
     public onLogicOperatorChanged = new EventEmitter<ILogicOperatorChangedArgs>();
 
-    @ViewChild('inputGroupConditions', { read: IgxInputGroupComponent, static: true })
-    protected inputGroupConditions: IgxInputGroupComponent;
-
-    @ViewChild('inputValues', { read: IgxInputDirective, static: true })
-    protected inputValuesDirective: IgxInputDirective;
+    @ViewChild('overlayOutlet', { read: IgxOverlayOutletDirective, static: true })
+    public overlayOutlet: IgxOverlayOutletDirective;
 
-    @ViewChild('dropdownConditions', { read: IgxDropDownComponent, static: true })
-    protected dropdownConditions: IgxDropDownComponent;
+    @ViewChild('dropdownConditions', { read: IgxSelectComponent, static: true })
+    protected dropdownConditions: IgxSelectComponent;
 
     @ViewChild('logicOperatorButtonGroup', { read: IgxButtonGroupComponent })
     protected logicOperatorButtonGroup: IgxButtonGroupComponent;
 
-    protected get inputValuesElement() {
-        return this.inputValuesDirective;
-    }
+    @ViewChild('inputValues', { read: IgxInputDirective, static: true })
+    protected inputValuesDirective: IgxInputDirective;
 
     get isLast(): boolean {
         return this.expressionsList[this.expressionsList.length - 1] === this.expressionUI;
@@ -91,7 +88,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         return this.expressionsList.length === 1;
     }
 
-    get inputConditionsPlaceholder(): string {
+    get conditionsPlaceholder(): string {
         return this.grid.resourceStrings['igx_grid_filter_condition_placeholder'];
     }
 
@@ -110,9 +107,19 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
 
     constructor(public cdr: ChangeDetectorRef) {}
 
+    get conditions() {
+        return this.column.filters.conditionList();
+    }
+
+    protected get inputValuesElement() {
+        return this.inputValuesDirective;
+    }
+
     ngAfterViewInit(): void {
-        this._dropDownOverlaySettings.outlet = this.column.grid.outletDirective;
-        this._dropDownOverlaySettings.positionStrategy.settings.target = this.inputGroupConditions.element.nativeElement;
+        this.dropDownOverlaySettings.outlet = this.overlayOutlet;
+        this.dropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy({
+            target : this.dropdownConditions.inputGroup.element.nativeElement
+        });
     }
 
     public focus() {
@@ -121,22 +128,6 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         requestAnimationFrame(() => this.inputValuesElement.focus());
     }
 
-    public isConditionSelected(conditionName: string): boolean {
-        return this.expressionUI.expression.condition && this.expressionUI.expression.condition.name === conditionName;
-    }
-
-    public getConditionName(condition: IFilteringOperation) {
-        return condition ? this.translateCondition(condition.name) : null;
-    }
-
-    public getInputWidth() {
-        return this.inputGroupConditions.element.nativeElement.offsetWidth + 'px';
-    }
-
-    get conditions() {
-        return this.column.filters.conditionList();
-    }
-
     public translateCondition(value: string): string {
         return this.grid.resourceStrings[`igx_grid_filter_${this.getCondition(value).name}`] || value;
     }
@@ -151,21 +142,21 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         }
     }
 
-    public toggleCustomDialogDropDown() {
-        this.dropdownConditions.toggle(this._dropDownOverlaySettings);
-    }
-
-    public getCondition(value: string): IFilteringOperation {
-        return this.column.filters.condition(value);
+    public isConditionSelected(conditionName: string): boolean {
+        return this.expressionUI.expression.condition && this.expressionUI.expression.condition.name === conditionName;
     }
 
     public onConditionsChanged(eventArgs: any) {
-        const value = (eventArgs.newSelection as IgxDropDownItemComponent).value;
+        const value = (eventArgs.newSelection as IgxSelectComponent).value;
         this.expressionUI.expression.condition = this.getCondition(value);
 
         this.focus();
     }
 
+    public getCondition(value: string): IFilteringOperation {
+        return this.column.filters.condition(value);
+    }
+
     public onValuesInput(eventArgs) {
         this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
@@ -196,15 +187,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         this.onExpressionRemoved.emit(this.expressionUI);
     }
 
-    public onInputConditionsKeyDown(eventArgs) {
-        if (eventArgs.altKey && (eventArgs.key === KEYS.DOWN_ARROW || eventArgs.key === KEYS.DOWN_ARROW_IE)) {
-            this.toggleCustomDialogDropDown();
-        }
-
-        if (eventArgs.key === KEYS.TAB && eventArgs.shiftKey && this.expressionsList[0] === this.expressionUI) {
-            eventArgs.preventDefault();
-        }
-
-        eventArgs.stopPropagation();
+    public onOutletPointerDown(event) {
+        event.preventDefault();
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
@@ -32,6 +32,7 @@ import { IgxToggleModule } from '../../../directives/toggle/toggle.directive';
 import { IgxListModule } from '../../../list/list.component';
 import { IgxExcelStyleSearchFilterPipe } from './excel-style-search.pipe';
 import { IgxProgressBarModule } from '../../../progressbar/progressbar.component';
+import { IgxSelectModule } from './../../../select/select.module';
 
 /**
  * @hidden
@@ -79,7 +80,8 @@ import { IgxProgressBarModule } from '../../../progressbar/progressbar.component
         IgxFilterModule,
         IgxToggleModule,
         IgxListModule,
-        IgxProgressBarModule
+        IgxProgressBarModule,
+        IgxSelectModule,
     ],
     entryComponents: [
         IgxGridExcelStyleFilteringComponent
