fix(input-group): fix typo in supressInputAutofocus input, #7032

ViktorSlavov · ViktorSlavov · commit caf9d347b0b6 · 2020-04-14T14:45:10.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
 
+- `IgxInputGroup`
+  - **Renamed** `supressInputAutofocus` input to `suppressInputAutofocus`
+
 ### Themes
 - **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
 
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
@@ -70,6 +70,11 @@
             "version": "9.0.1",
             "description": "Updates Ignite UI for Angular from v9.0.0 to v9.0.1",
             "factory": "./update-9_0_1"
+        },
+        "migration-15": {
+            "version": "9.1.0",
+            "description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",
+            "factory": "./update-9_1_0"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json
@@ -0,0 +1,13 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "supressInputAutofocus",
+            "replaceWith": "suppressInputAutofocus",
+            "owner": {
+                "selector": "igx-input-group",
+                "type": "component"
+            }
+        }
+    ]
+}
diff --git a/projects/igniteui-angular/migrations/update-9_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-9_1_0/index.spec.ts
@@ -0,0 +1,44 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { virtualFs } from '@angular-devkit/core';
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 9.1.0', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+      };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update igx-group supressInputAutofocus to suppressInputAutofocus', done => {
+        appTree.create(
+            `/testSrc/appPrefix/component/input.component.html`,
+            '<igx-input-group [supressInputAutofocus]="true"><input igxInput></igx-input-group>'
+        );
+
+        const tree = schematicRunner.runSchematic('migration-15', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/input.component.html'))
+            .toEqual('<igx-input-group [suppressInputAutofocus]="true"><input igxInput></igx-input-group>');
+
+        done();
+    });
+});
diff --git a/projects/igniteui-angular/migrations/update-9_1_0/index.ts b/projects/igniteui-angular/migrations/update-9_1_0/index.ts
@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '9.1.0';
+
+export default function(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}
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
@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #editableDatePickerTemplate>
-    <igx-input-group #editableInputGroup [supressInputAutofocus]="true" (mousedown)="mouseDown($event)">
+    <igx-input-group #editableInputGroup [suppressInputAutofocus]="true" (mousedown)="mouseDown($event)">
         <igx-prefix (click)="openDialog(editableInputGroup.element.nativeElement)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
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'" [supressInputAutofocus]="true">
+                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true">
                             <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,7 +10,7 @@
 </igx-drop-down>
 
 <ng-template #defaultFilterUI>
-    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
+    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
         <igx-prefix #inputGroupPrefix
                     (click)="toggleConditionsDropDown(inputGroupPrefix)"
                     (keydown)="onPrefixKeyDown($event)"
@@ -50,7 +50,7 @@
         (onSelection)="onDateSelected($event)"
         (onClose)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog">
-            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
+            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
                 <igx-prefix #inputGroupPrefix
                             tabindex="0"
                             (click)="toggleConditionsDropDown(inputGroupPrefix)"
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
@@ -15,7 +15,7 @@
     (click)="toggleCustomDialogDropDown()"
     type="box"
     [displayDensity]="displayDensity"
-    [supressInputAutofocus]="true">
+    [suppressInputAutofocus]="true">
 
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
@@ -36,7 +36,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" [supressInputAutofocus]="true">
+        <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity" [suppressInputAutofocus]="true">
             <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
@@ -15,7 +15,7 @@
     (click)="toggleCustomDialogDropDown()"
     type="box"
     [displayDensity]="displayDensity"
-    [supressInputAutofocus]="true">
+    [suppressInputAutofocus]="true">
 
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
@@ -34,7 +34,7 @@
     />
 </igx-input-group>
 
-<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity" [supressInputAutofocus]="true">
+<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity" [suppressInputAutofocus]="true">
     <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,7 @@
 <igx-input-group
             type="box"
             [displayDensity]="displayDensity"
-            [supressInputAutofocus]="true">
+            [suppressInputAutofocus]="true">
     <igx-icon igxPrefix>search</igx-icon>
     <input
         #input
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
@@ -19,6 +19,7 @@ import { IgxPrefixModule} from '../directives/prefix/prefix.directive';
 import { IgxSuffixModule } from '../directives/suffix/suffix.directive';
 import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import { IgxInputGroupBase } from './input-group.common';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
@@ -40,8 +41,6 @@ enum IgxInputGroupType {
 export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInputGroupBase {
     private _type = IgxInputGroupType.LINE;
     private _filled = false;
-    private _supressInputAutofocus = false;
-
     /**
      * An ElementRef property of the `IgxInputGroupComponent`.
      */
@@ -136,6 +135,18 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     @Input()
     public disabled = false;
 
+    /**
+     * Prevents automaticаlly focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).
+     * @remarks Automatic focus causes software keyboard to show on mobile devices.
+     *
+     * @example
+     * ```html
+     * <igx-input-group [suppressInputAutofocus]="true"></igx-input-group>
+     * ```
+     */
+    @Input()
+    public suppressInputAutofocus = false;
+
     /**
      * @hidden
      */
@@ -175,7 +186,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostListener('click', ['$event'])
     public onClick(event) {
-        if (!this._supressInputAutofocus) {
+        if (!this.suppressInputAutofocus) {
             this.input.focus();
         }
     }
@@ -219,24 +230,21 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     }
 
     /**
-     * Returns whether the input element of the input group will be automatically focused on click.
-     * ```typescript
-     * let supressInputAutofocus = this.inputGroup.supressInputAutofocus;
-     * ```
+     * @hidden
+     * @deprecated Use 'suppressInputAutofocus' instead.
      */
+    @DeprecateProperty(`Deprecated. Use 'suppressInputAutofocus' instead.`)
     @Input()
     public get supressInputAutofocus(): boolean {
-        return this._supressInputAutofocus;
+        return this.suppressInputAutofocus;
     }
 
     /**
-     * Sets whether the input element of the input group will be automatically focused on click.
-     * ```html
-     * <igx-input-group [supressInputAutofocus]="true"></igx-input-group>
-     * ```
+     * @hidden
+     * @deprecated Use 'suppressInputAutofocus' instead.
      */
     public set supressInputAutofocus(value: boolean) {
-        this._supressInputAutofocus = value;
+        this.suppressInputAutofocus = value;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts
@@ -336,7 +336,7 @@ class InputGroupInputDisplayDensityComponent {
 }
 
 @Component({
-    template: `<igx-input-group #igxInputGroup [supressInputAutofocus]="true">
+    template: `<igx-input-group #igxInputGroup [suppressInputAutofocus]="true">
                     <igx-icon>phone</igx-icon>
                     <input igxInput #igxInput/>
                 </igx-input-group>`
diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html
@@ -36,7 +36,7 @@ <h3 class="sample-title">Line Style Input</h3>
         </igx-input-group>
 
         <!-- Text field w/ icon prefix -->
-        <igx-input-group [supressInputAutofocus]="true">
+        <igx-input-group [suppressInputAutofocus]="true">
             <igx-prefix>
                 <igx-icon>email</igx-icon>
             </igx-prefix>
diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html
@@ -67,7 +67,7 @@ <h4 class="sample-title">Templated Time Picker</h4>
                     <ng-template igxTimePickerTemplate
                                  let-openDialog="openDialog"
                                  let-value="value">
-                        <igx-input-group [supressInputAutofocus]="true">
+                        <igx-input-group [suppressInputAutofocus]="true">
                             <label igxLabel>Required</label>
                             <igx-prefix (click)="openDialog()">
                                 <igx-icon>access_time</igx-icon>

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,11 @@`
`70`	`70`	`"version": "9.0.1",`
`71`	`71`	`"description": "Updates Ignite UI for Angular from v9.0.0 to v9.0.1",`
`72`	`72`	`"factory": "./update-9_0_1"`
	`73`	`+ },`
	`74`	`+ "migration-15": {`
	`75`	`+ "version": "9.1.0",`
	`76`	`+ "description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",`
	`77`	`+ "factory": "./update-9_1_0"`
`73`	`78`	`}`
`74`	`79`	`}`
`75`	`80`	`}`