Bind onChange against input event, fix layout trackBy

packages/angular-material/src/controls/number.renderer.ts

@@ -44,7 +44,7 @@ import { LocaleValidation } from 'angular-l10n';
             <mat-label>{{ label }}</mat-label>
             <input
                 matInput
-                (change)="onChange($event)"
+                (input)="onChange($event)"
                 placeholder="{{ description }}"
                 [value]="data !== undefined && data !== null && locale ?
                   (data |  l10nDecimal:locale:digits) :

packages/angular-material/src/controls/text.renderer.ts

@@ -35,7 +35,7 @@ import { isControl, JsonFormsState, RankedTester, rankWith } from '@jsonforms/co
             <input
                 matInput
                 [type]="getType()"
-                (change)="onChange($event)"
+                (input)="onChange($event)"
                 placeholder="{{ description }}"
                 [id]="id"
                 [formControl]="form"

packages/angular-material/src/controls/textarea.renderer.ts

@@ -34,7 +34,7 @@ import { isMultiLineControl, JsonFormsState, RankedTester, rankWith } from '@jso
             <mat-label>{{ label }}</mat-label>
             <textarea
                 matInput
-                (change)="onChange($event)"
+                (input)="onChange($event)"
                 placeholder="{{ description }}"
                 [id]="id"
                 [formControl]="form"

packages/angular-material/src/layouts/group-layout.renderer.ts

@@ -32,7 +32,7 @@ import { NgRedux } from '@angular-redux/store';
     template: `
     <mat-card fxLayout='column' [fxHide]="hidden">
         <mat-card-title class='mat-title'>{{uischema.label}}</mat-card-title>
-          <div *ngFor="let props of renderProps" fxFlex>
+          <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
             <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
           </div>
     </mat-card>

packages/angular-material/src/layouts/horizontal-layout.renderer.ts

@@ -37,7 +37,7 @@ import { NgRedux } from '@angular-redux/store';
     selector: 'HorizontalLayoutRenderer',
     template: `
         <div fxLayout='row' fxLayoutGap='16px' [fxHide]="hidden">
-            <div *ngFor="let props of renderProps" fxFlex>
+            <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
                 <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
             </div>
         </div>

packages/angular-material/src/layouts/layout.renderer.ts

@@ -27,22 +27,18 @@ import { OnDestroy, OnInit } from '@angular/core';
 import { JsonFormsBaseRenderer } from '@jsonforms/angular';
 import {
     JsonFormsState,
-    JsonSchema,
     Layout,
     mapStateToLayoutProps,
     OwnPropsOfRenderer,
-    UISchemaElement } from '@jsonforms/core';
+    UISchemaElement
+} from '@jsonforms/core';
 import { Subscription } from 'rxjs';
 
 export class LayoutRenderer<T extends Layout>
     extends JsonFormsBaseRenderer implements OnInit, OnDestroy {
 
     hidden: boolean;
     private subscription: Subscription;
-    private elements: OwnPropsOfRenderer[];
-    private oldSchema: JsonSchema;
-    private oldUISchema: T;
-    private oldPath: string;
 
     constructor(private ngRedux: NgRedux<JsonFormsState>) {
         super();
@@ -64,19 +60,15 @@ export class LayoutRenderer<T extends Layout>
     }
 
     get renderProps(): OwnPropsOfRenderer[] {
-        if (this.uischema === this.oldUISchema &&
-            this.schema === this.oldSchema &&
-            this.path === this.oldPath) {
-            return this.elements;
-        }
-        this.oldUISchema = this.uischema as T;
-        this.oldSchema = this.schema;
-        this.oldPath = this.path;
-        this.elements =  (this.oldUISchema.elements || []).map((el: UISchemaElement) => ({
+        const elements = ((this.uischema as T).elements || []).map((el: UISchemaElement) => ({
             uischema: el,
-            schema: this.oldSchema,
-            path: this.oldPath
+            schema: this.schema,
+            path: this.path
         }));
-        return this.elements;
+        return elements;
+    }
+
+    trackElement(_index: number, renderProp: OwnPropsOfRenderer): string {
+        return renderProp ? renderProp.path + JSON.stringify(renderProp.uischema) : null;
     }
 }

packages/angular-material/src/layouts/vertical-layout.renderer.ts

@@ -31,7 +31,7 @@ import { NgRedux } from '@angular-redux/store';
     selector: 'VerticalLayoutRenderer',
     template: `
     <div fxLayout='column' fxLayoutGap='16px' [fxHide]="hidden">
-        <div *ngFor="let props of renderProps" fxFlex>
+        <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
             <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
         </div>
     </div>

packages/angular-material/test/object-control.spec.ts

@@ -131,12 +131,10 @@ describe('Object Control', () => {
         }
       }
     });
-    component.ngOnInit();
     mockSubStore.complete();
     fixture.detectChanges();
-
-    fixture.whenRenderingDone().then(() => {
-      fixture.detectChanges();
+    component.ngOnInit();
+    fixture.whenStable().then(() => {
       expect(fixture.nativeElement.querySelectorAll('input').length).toBe(2);
     });
   }));

packages/angular-test/src/number.ts

@@ -244,7 +244,7 @@ export const numberInputEventTest = <C extends JsonFormsControl>(
         const spy = spyOn(component, 'onChange');
         numberNativeElement.value = 456.456;
         if (numberNativeElement.dispatchEvent) {
-            numberNativeElement.dispatchEvent(new Event('change'));
+            numberNativeElement.dispatchEvent(new Event('input'));
         }
         // trigger change detection
         fixture.detectChanges();

packages/angular-test/src/text.ts

@@ -293,7 +293,7 @@ export const textInputEventTest = <C extends JsonFormsControl>(
             const spy = spyOn(component, 'onChange');
             textNativeElement.value = 'bar';
             if (textNativeElement.dispatchEvent) {
-                textNativeElement.dispatchEvent(new Event('change'));
+                textNativeElement.dispatchEvent(new Event('input'));
             }
             // trigger change detection
             fixture.detectChanges();