Merge pull request #7098 from IgniteUI/dkamburov/fix-6973-8.2.x

fix(filtering): Avoid resetting values for number inputs #6973

Author: ChronosSF

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

@@ -24,7 +24,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
 import { ExpressionUI } from './grid-filtering.service';
 import { IgxDropDownItemComponent } from '../../drop-down/drop-down-item.component';
 import { IgxFilteringService } from './grid-filtering.service';
-import { KEYS, isEdge } from '../../core/utils';
+import { KEYS, isEdge, isIE } from '../../core/utils';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll';
 
 /**
@@ -281,8 +281,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     public onInput(eventArgs) {
         // 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 .
-        if (isEdge() || this.isKeyPressed || eventArgs.target.value) {
-            this.value = eventArgs.target.value;
+        // There is no need to reset the value on every invalid number input.
+        // The invalid value is converted to empty string input type="number"
+        const target = eventArgs.target;
+        if (isEdge() && target.type !== 'number' || this.isKeyPressed && isIE() || target.value) {
+             this.value = target.value;
         }
     }
 

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

@@ -46,6 +46,7 @@ import {
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
 import { GridSelectionMode, FilterMode } from '../common/enums';
 
+const DEBOUNCETIME = 30;
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
 const FILTER_UI_CELL = 'igx-grid-filtering-cell';
 const FILTER_UI_SCROLL_START_CLASS = '.igx-grid__filtering-row-scroll-start';
@@ -668,6 +669,25 @@ describe('IgxGrid - Filtering actions #grid', () => {
         tick(100);
         fix.detectChanges();
 
+        sendInput(input, '254..', fix);
+        tick();
+        fix.detectChanges();
+
+
+        expect(grid.rowList.length).toEqual(6);
+        expect(close.nativeElement.classList.contains('igx-button--disabled')).toBeFalsy();
+        expect(reset.nativeElement.classList.contains('igx-button--disabled')).toBeFalsy();
+        expect(input.nativeElement.offsetHeight).toBeGreaterThan(0);
+
+        // open dropdown
+        filterIcon.nativeElement.click();
+        tick();
+        fix.detectChanges();
+        // less than or equal to
+        ddItems[5].click();
+        tick(100);
+        fix.detectChanges();
+
         expect(grid.rowList.length).toEqual(6);
         expect(close.nativeElement.classList.contains('igx-button--disabled')).toBeFalsy();
         expect(reset.nativeElement.classList.contains('igx-button--disabled')).toBeFalsy();
@@ -2845,9 +2865,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
         }));
 
-        it('Verify filter cell chip is scrolled into view on click.', fakeAsync(() => {
+        it('Verify filter cell chip is scrolled into view on click.', async () => {
             grid.width = '470px';
-            tick(100);
+            await wait(DEBOUNCETIME);
             fix.detectChanges();
 
             // Verify 'ReleaseDate' filter chip is not fully visible.
@@ -2858,11 +2878,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
                 'chip should not be fully visible and thus not within grid');
 
             GridFunctions.clickFilterCellChip(fix, 'ReleaseDate');
-            tick(100);
+            await wait(DEBOUNCETIME);
             fix.detectChanges();
 
-            GridFunctions.closeFilterRow(fix);
-            tick(100);
+            grid.filteringRow.close();
+            await wait();
             fix.detectChanges();
 
             // Verify 'ReleaseDate' filter chip is fully visible.
@@ -2871,7 +2891,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             gridRect = grid.nativeElement.getBoundingClientRect();
             expect(chipRect.left > gridRect.left && chipRect.right < gridRect.right).toBe(true,
                 'chip should be fully visible and within grid');
-        }));
+        });
 
         it('Verify condition chips are scrolled into/(out of) view by using arrow buttons.', (async () => {
             grid.width = '700px';