chore(*): apply requested changes

Author: MonikaKirkova

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -27,7 +27,7 @@
             autocomplete="off"
             [value]="value"
             (input)="onInput($event)"
-            type="text"
+            [type]="type"
             [readonly]="isUnaryCondition"
             (click)="onInputClick()"
             (compositionstart)="onCompositionStart()"

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -58,9 +58,6 @@ import { IgxIconButtonDirective } from '../../../directives/button/icon-button.d
     imports: [NgFor, IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, NgIf, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective, IgxIconButtonDirective]
 })
 export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
-    public ALLOWED_NUMERIC_SYMBOLS = ['+', '-', ',', '.'];
-    public ALLOWED_NAVIGATION_SYMBOLS = ['Backspace', 'Enter', 'ArrowRight', 'ArrowLeft', 'Tab'];
-
     @Input()
     public get column(): ColumnType {
         return this._column;
@@ -81,16 +78,14 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    private _value;
     @Input()
     public get value(): any {
-        return this._value;
+        return this.expression ? this.expression.searchVal : null;
     }
 
     public set value(val) {
         if (!val && val !== 0 && (this.expression.searchVal || this.expression.searchVal === 0)) {
             this.expression.searchVal = null;
-            this._value = null;
             const index = this.expressionsList.findIndex(item => item.expression === this.expression);
             if (index === 0 && this.expressionsList.length === 1) {
                 this.filteringService.clearFilter(this.column.field);
@@ -102,18 +97,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
                 return;
             }
         } else {
+            if (val === '') {
+                return;
+            }
             const oldValue = this.expression.searchVal;
             if (isEqual(oldValue, val)) {
                 return;
             }
 
-            this._value = val;
-            if ((this.column.dataType === GridColumnDataType.Number || this.column.dataType === GridColumnDataType.Currency)
-                && this.ALLOWED_NUMERIC_SYMBOLS.includes(val)) {
-                this.expression.searchVal = val;
-            } else {
-                this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
-            }
+            this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
             }
@@ -246,7 +238,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
         if (selectedItem) {
             this.expression = selectedItem.expression;
-            this._value = this.expression.searchVal;
         }
 
         this.filteringService.grid.localeChange
@@ -275,6 +266,17 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         return this.defaultFilterUI;
     }
 
+    public get type() {
+        switch (this.column.dataType) {
+            case GridColumnDataType.String:
+            case GridColumnDataType.Boolean:
+                return 'text';
+            case GridColumnDataType.Number:
+            case GridColumnDataType.Currency:
+                return 'number';
+        }
+    }
+
     public get conditions(): any {
         return this.column.filters.conditionList();
     }
@@ -317,12 +319,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
     public onInputKeyDown(event: KeyboardEvent) {
         this.isKeyPressed = true;
         event.stopPropagation();
-        if(this.column.dataType === GridColumnDataType.Number || this.column.dataType === GridColumnDataType.Currency) {
-            const allowedSymbols = [...this.ALLOWED_NUMERIC_SYMBOLS, ...this.ALLOWED_NAVIGATION_SYMBOLS];
-            if (isNaN(Number(event.key)) && !(allowedSymbols.includes(event.key))) {
-                event.preventDefault();
-            }
-        }
         if (this.column.dataType === GridColumnDataType.Boolean) {
             if (this.platform.isActivationKey(event)) {
                 this.inputGroupPrefix.nativeElement.focus();
@@ -362,6 +358,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
         // when you have a japanese character as a placeholder, on init the value here is empty string .
         const target = eventArgs.target;
+        if ((eventArgs.data === '-' || eventArgs.data === '+') && this.column.dataType === GridColumnDataType.Number) {
+            return;
+        }
         if (this.column.dataType === GridColumnDataType.DateTime) {
             this.value = eventArgs;
             return;
@@ -465,7 +464,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
             this.removeExpression(indexToDeselect, this.expression);
         }
         this.resetExpression();
-        this._value = this.expression.searchVal;
         this.scrollChipsWhenAddingExpression();
     }
 
@@ -639,7 +637,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         item.isSelected = !item.isSelected;
         if (item.isSelected) {
             this.expression = item.expression;
-            this._value = this.expression.searchVal;
+
             this.focusEditElement();
         }
     }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -906,7 +906,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(input.properties.readOnly).toBeTruthy();
         }));
 
-        it('should correctly filter and display in input numeric values', fakeAsync(() => {
+        it('should correctly filter negative values', fakeAsync(() => {
             fix = TestBed.createComponent(IgxGridFilteringNumericComponent);
             fix.detectChanges();
             grid = fix.componentInstance.grid;
@@ -919,22 +919,12 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             // Set input and confirm
             GridFunctions.typeValueInFilterRowInput('-1', fix);
 
-            expect(input.componentInstance.value).toEqual('-1');
+            expect(input.componentInstance.value).toEqual(-1);
             expect(grid.rowList.length).toEqual(1);
 
-            GridFunctions.typeValueInFilterRowInput('2.5', fix);
-
-            expect(input.componentInstance.value).toEqual('2.5');
-            expect(grid.rowList.length).toEqual(1);
-
-            GridFunctions.typeValueInFilterRowInput('2.', fix);
-
-            expect(input.componentInstance.value).toEqual('2.');
-            expect(grid.rowList.length).toEqual(0);
-
             GridFunctions.typeValueInFilterRowInput('0', fix);
 
-            expect(input.componentInstance.value).toEqual('0');
+            expect(input.componentInstance.value).toEqual(0);
             expect(grid.rowList.length).toEqual(0);
 
             GridFunctions.typeValueInFilterRowInput('', fix);
@@ -2790,12 +2780,12 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         it('Should not prevent mousedown event when target is within the filter cell template', fakeAsync(() => {
             const filterCell = GridFunctions.getFilterCell(fix, 'ProductName');
             const input = filterCell.query(By.css('input')).nativeElement;
- 
+
             const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
             const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault');
             input.dispatchEvent(mousedownEvent, { bubbles: true });
             fix.detectChanges();
- 
+
             expect(preventDefaultSpy).not.toHaveBeenCalled();
         }));
 
@@ -2807,7 +2797,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault');
             firstCell.dispatchEvent(mousedownEvent);
             fix.detectChanges();
-           
+
             expect(preventDefaultSpy).toHaveBeenCalled();
         }));
     });