diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts index 0d42b2efb99..6af3c37f92d 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts +++ b/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; } } 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 index 43dda5ced46..39c8955eee4 100644 --- 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 @@ -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';