Merge branch 'master' into SKrastev/grid-disabled-pin-row

ChronosSF · web-flow · commit 2c2e89f528a3 · 2020-04-15T14:44:49.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxInputGroup`
   - **Renamed** `supressInputAutofocus` input to `suppressInputAutofocus`
+  - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
 
 ### Themes
 - **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html
@@ -1,5 +1,5 @@
 <ng-template #readOnlyDatePickerTemplate>
-    <igx-input-group (click)="openDialog()" (mousedown)="mouseDown($event)">
+    <igx-input-group (click)="openDialog()">
         <igx-prefix>
             <igx-icon>today</igx-icon>
         </igx-prefix>
@@ -16,8 +16,8 @@
 </ng-template>
 
 <ng-template #editableDatePickerTemplate>
-    <igx-input-group #editableInputGroup [suppressInputAutofocus]="true" (mousedown)="mouseDown($event)">
-        <igx-prefix (click)="openDialog(editableInputGroup.element.nativeElement)">
+    <igx-input-group #editableInputGroup>
+        <igx-prefix (click)="onOpenClick($event)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
         <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -414,7 +414,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             mode: this.mode,
             specialDates: this.specialDates,
             value: this.value,
-            openDialog: (target?: HTMLElement) => this.openDialog(target)
+            openDialog: () => this.openDialog()
         };
     }
 
@@ -665,6 +665,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @ViewChild(IgxInputGroupComponent)
     protected inputGroup: IgxInputGroupComponent;
 
+    @ContentChild(IgxInputGroupComponent)
+    protected inputGroupUserTemplate: IgxInputGroupComponent;
+
     @ViewChild(IgxInputDirective, { read: ElementRef })
     private _inputElementRef: ElementRef;
 
@@ -784,7 +787,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @HostListener('keydown.spacebar', ['$event'])
     @HostListener('keydown.space', ['$event'])
     public onSpaceClick(event: KeyboardEvent) {
-        this.openDialog(this.getInputGroupElement());
+        this.openDialog();
         event.preventDefault();
     }
 
@@ -799,7 +802,13 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @hidden @internal
      */
     public getInputGroupElement() {
-        return this.inputGroup ? this.inputGroup.element.nativeElement : null;
+        if (this.inputGroup) {
+            return this.inputGroup.element.nativeElement;
+        }
+        if (this.inputGroupUserTemplate) {
+            return this.inputGroupUserTemplate.element.nativeElement;
+        }
+        return null;
     }
 
     /**
@@ -983,10 +992,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * this.datePicker.openDialog(target);
      * ```
      */
-    public openDialog(target?: HTMLElement): void {
+    public openDialog(): void {
         if (!this.collapsed) {
             return;
         }
+
         switch (this.mode) {
             case InteractionMode.Dialog: {
                 this.hasHeader = true;
@@ -997,6 +1007,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             }
             case InteractionMode.DropDown: {
                 this.hasHeader = false;
+                const target = this.getInputGroupElement();
                 if (target) {
                     this.dropDownOverlaySettings.positionStrategy.settings.target = target;
                 }
@@ -1008,14 +1019,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         }
     }
 
-    public mouseDown(e) {
-        // if the click is not on the input but in input group
-        // e.g. on prefix or sufix, prevent default and this way prevent blur
-        if (e.target !== this.getEditElement()) {
-            e.preventDefault();
-        }
-    }
-
     /**
      * Close the calendar.
      *
@@ -1061,6 +1064,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         this.onSelection.emit(date);
     }
 
+    /** @hidden @internal */
+    public onOpenClick(event: MouseEvent) {
+        event.stopPropagation();
+        this.openDialog();
+    }
+
     /**
      * @hidden @internal
      */
@@ -1099,7 +1108,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             case KEYS.DOWN_ARROW:
             case KEYS.DOWN_ARROW_IE:
                 if (event.altKey) {
-                    this.openDialog(this.getInputGroupElement());
+                    this.openDialog();
                 } else {
                     event.preventDefault();
                     event.stopPropagation();
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
@@ -184,7 +184,7 @@ <h6 class="igx-filter-empty__title">
                                  [locale]="grid.locale"
                                  [outlet]="grid.outletDirective">
                     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
-                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true">
+                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'">
                             <input #searchValueInput
                                     igxInput
                                     tabindex="0"
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
@@ -10,9 +10,9 @@
 </igx-drop-down>
 
 <ng-template #defaultFilterUI>
-    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
+    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" (focusout)="onInputGroupFocusout()">
         <igx-prefix #inputGroupPrefix
-                    (click)="toggleConditionsDropDown(inputGroupPrefix)"
+                    (click)="inputGroupPrefixClick($event)"
                     (keydown)="onPrefixKeyDown($event)"
                     tabindex="0"
                     [igxDropDownItemNavigation]="inputGroupConditions">
@@ -50,10 +50,10 @@
         (onSelection)="onDateSelected($event)"
         (onClose)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog">
-            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
+            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" (focusout)="onInputGroupFocusout()">
                 <igx-prefix #inputGroupPrefix
                             tabindex="0"
-                            (click)="toggleConditionsDropDown(inputGroupPrefix)"
+                            (click)="inputGroupPrefixClick($event)"
                             (keydown)="onPrefixKeyDown($event)"
                             [igxDropDownItemNavigation]="inputGroupConditions">
                     <igx-icon fontSet="filtering-icons" [name]="expression.condition.iconName"></igx-icon>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
@@ -482,6 +482,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this.value = value;
     }
 
+    /** @hidden @internal */
+    public inputGroupPrefixClick(event: MouseEvent) {
+        event.stopPropagation();
+        (event.currentTarget as HTMLElement).focus();
+        this.toggleConditionsDropDown(event.currentTarget);
+    }
+
     /**
      * Opens the conditions dropdown.
      */
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
@@ -14,8 +14,7 @@
     #inputGroupConditions
     (click)="toggleCustomDialogDropDown()"
     type="box"
-    [displayDensity]="displayDensity"
-    [suppressInputAutofocus]="true">
+    [displayDensity]="displayDensity">
 
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
@@ -36,7 +35,7 @@
 
 <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">
-        <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity" [suppressInputAutofocus]="true">
+        <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity">
             <input #input
                     igxInput
                     tabindex="0"
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
@@ -14,8 +14,7 @@
     #inputGroupConditions
     (click)="toggleCustomDialogDropDown()"
     type="box"
-    [displayDensity]="displayDensity"
-    [suppressInputAutofocus]="true">
+    [displayDensity]="displayDensity">
 
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
@@ -34,7 +33,7 @@
     />
 </igx-input-group>
 
-<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity" [suppressInputAutofocus]="true">
+<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity">
     <input
         #inputValues
         igxInput
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
@@ -1,7 +1,6 @@
 <igx-input-group
             type="box"
-            [displayDensity]="displayDensity"
-            [suppressInputAutofocus]="true">
+            [displayDensity]="displayDensity">
     <igx-icon igxPrefix>search</igx-icon>
     <input
         #input
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -1260,17 +1260,22 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
 
             const prefix = GridFunctions.getFilterRowPrefix(fix);
+            const event = {
+                currentTarget: prefix.nativeElement,
+                preventDefault: () => {},
+                stopPropagation: () => {}
+            };
 
             // Click prefix to open conditions dropdown
-            prefix.triggerEventHandler('click', {});
+            prefix.triggerEventHandler('click', event);
             tick(100);
             fix.detectChanges();
 
             // Verify dropdown is opened
             GridFunctions.verifyFilteringDropDownIsOpened(fix);
 
             // Click prefix again to close conditions dropdown
-            prefix.triggerEventHandler('click', {});
+            prefix.triggerEventHandler('click', event);
             tick(100);
             fix.detectChanges();
 
@@ -1282,9 +1287,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
 
             const prefix = GridFunctions.getFilterRowPrefix(fix);
+            const event = {
+                currentTarget: prefix.nativeElement,
+                preventDefault: () => {},
+                stopPropagation: () => {}
+            };
 
             // Click prefix to open conditions dropdown
-            prefix.triggerEventHandler('click', {});
+            prefix.triggerEventHandler('click', event);
             tick(100);
             fix.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
