Fixed number and date input values in Filter template demo. (#9358)

* fix(Filter): Fixed date input value in template

* Fixed the number input in template
* Navigation error in filter row
* Rearranged onInput logic
* Fixed a typo in event name.
* Fixed suffix visibility condition.

Co-authored-by: Konstantin Dinev <[email protected]>

Author: gedinakova

src/app/grid-filter-template/grid-filter-template.sample.html

@@ -38,8 +38,9 @@
                         tabindex="0"
                         placeholder="Filter..."
                         autocomplete="off"
-                        (input)="onInput(input, column)"/>
-                    <igx-suffix *ngIf="input.value || input.value === 0" (click)="clearInput(input, column)" tabindex="0">
+                        (input)="onInput(input, column)"
+                        (keydown)="onKeyDown($event)"/>
+                    <igx-suffix *ngIf="input.value" (click)="clearInput(input, column)" tabindex="0">
                         <igx-icon>clear</igx-icon>
                     </igx-suffix>
                 </igx-input-group>

src/app/grid-filter-template/grid-filter-template.sample.ts

@@ -490,22 +490,37 @@ export class GridFilterTemplateSampleComponent implements OnInit {
 
     public onInput(input: any, column: IgxColumnComponent) {
         let operand = null;
+        let value = input.value;
+
+        if (value === '') {
+            this.grid1.clearFilter(column.field);
+            return;
+        }
+
         switch (column.dataType) {
             case DataType.Number:
+                value = Number.parseInt(value, 10);
                 operand = IgxNumberFilteringOperand.instance().condition('equals');
                 break;
             case DataType.Date:
+                value = new Date(value);
                 operand = IgxDateFilteringOperand.instance().condition('equals');
                 break;
             default:
                 operand = IgxStringFilteringOperand.instance().condition('contains');
                 break;
         }
-        this.grid1.filter(column.field, input.value, operand, column.filteringIgnoreCase);
+
+        this.grid1.filter(column.field, value, operand, column.filteringIgnoreCase);
     }
 
     public clearInput(input: any, column: any) {
         input.value = null;
         this.grid1.clearFilter(column.field);
     }
+
+    public onKeyDown(event: KeyboardEvent) {
+        event.stopImmediatePropagation();
+    }
+
 }