diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html index 519cfa17861..b878e9fdc51 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html @@ -24,11 +24,13 @@ tabindex="0" [placeholder]="placeholder" autocomplete="off" - [(ngModel)]="value" + [value]="value" + (input)="onInput($event)" [type]="type" [readonly]="isUnaryCondition" (click)="onInputClick()" - (keydown)="onInputKeyDown($event)"/> + (keydown)="onInputKeyDown($event)" + (keyup)="onInputKeyUp($event)"/> clear 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 104fac8a799..e58ed1495ca 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 @@ -60,6 +60,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit { private chipsAreaWidth: number; private chipAreaScrollOffset = 0; private _column = null; + private isKeyPressed = false; public showArrows: boolean; public expression: IFilteringExpression; @@ -229,6 +230,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit { * Event handler for keydown on the input. */ public onInputKeyDown(event: KeyboardEvent) { + this.isKeyPressed = true; + if (this.column.dataType === DataType.Boolean) { if ((event.key === KEYS.ENTER || event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE) && this.dropDownConditions.collapsed) { @@ -270,6 +273,24 @@ export class IgxGridFilteringRowComponent implements AfterViewInit { event.stopPropagation(); } + /** + * Event handler for keyup on the input. + */ + public onInputKeyUp(eventArgs) { + this.isKeyPressed = false; + } + + /** + * Event handler for input on the input. + */ + 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 (this.isKeyPressed) { + this.value = eventArgs.target.value; + } + } + /** * Event handler for input click event. */ 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 2619e838d7c..77587de9e1d 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 @@ -2948,7 +2948,9 @@ const expectedResults = []; function sendInput(element, text, fix) { element.nativeElement.value = text; + element.nativeElement.dispatchEvent(new Event('keydown')); element.nativeElement.dispatchEvent(new Event('input')); + element.nativeElement.dispatchEvent(new Event('keyup')); fix.detectChanges(); } diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index 37860563637..671fb5689a3 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -425,7 +425,9 @@ export class GridFunctions { const input = filterUIRow.query(By.directive(IgxInputDirective)); input.nativeElement.value = value; + input.nativeElement.dispatchEvent(new Event('keydown')); input.nativeElement.dispatchEvent(new Event('input')); + input.nativeElement.dispatchEvent(new Event('keyup')); fix.detectChanges(); // Enter key to submit