fix(angular-material): repaint array layouts on external state changes

ArrayLayoutRenderer is OnPush but never scheduled a check of its own, so it was
only rendered when an event inside its own view happened to mark it dirty. A
state change originating anywhere else - the form being set readonly, data being
set programmatically, an item being added by another renderer - updated the
component's fields but never reached the template.

It now calls markForCheck when it maps new props, like the layout renderers and
the list with detail already do.

Author: lucas-koehler

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

@@ -22,7 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
@@ -210,6 +216,7 @@ export class ArrayLayoutRenderer
   itemProps: OwnPropsOfRenderer[] = [];
   private detailUiSchemaDeps: unknown[] | undefined;
   private itemPropsDeps: unknown[] | undefined;
+  private changeDetectorRef = inject(ChangeDetectorRef);
   mapToProps(
     state: JsonFormsState
   ): StatePropsOfArrayLayout & { translations: ArrayTranslations } {
@@ -258,6 +265,12 @@ export class ArrayLayoutRenderer
     this.translations = props.translations;
     this.detailUiSchema = this.resolveDetailUiSchema(props);
     this.updateItemProps(props, this.detailUiSchema);
+    // The component is OnPush, so it is only checked when an event inside its
+    // own view marks it dirty. A state change with no such event - the form
+    // being set readonly, data being set programmatically, an item being added
+    // from elsewhere - has to schedule the check itself, otherwise none of the
+    // above reaches the template.
+    this.changeDetectorRef.markForCheck();
   }
   private resolveDetailUiSchema(props: ArrayLayoutProps): UISchemaElement {
     const deps = [

packages/angular-material/test/array-layout.spec.ts

@@ -22,6 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import { ChangeDetectorRef } from '@angular/core';
 import { ComponentFixture, waitForAsync } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { MatBadge } from '@angular/material/badge';
@@ -247,6 +248,31 @@ describe('Array layout ui schema handling', () => {
     expect(fixture.componentInstance.getProps(1).uischema).toBe(detail);
   });
 
+  it('schedules a check so that state changes reach the template', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    // the renderer is OnPush, so without this nothing repaints for a change
+    // that did not originate from an event in its own view. As the fixture root
+    // it is checked unconditionally, hence the explicit expectation.
+    const changeDetectorRef = (fixture.componentInstance as any)
+      .changeDetectorRef as ChangeDetectorRef;
+    spyOn(changeDetectorRef, 'markForCheck').and.callThrough();
+
+    getJsonFormsService(fixture.componentInstance).updateCore(
+      Actions.update('test', () => [{}, {}])
+    );
+
+    expect(changeDetectorRef.markForCheck).toHaveBeenCalled();
+  });
+
   it('renders no items for data that is not an array', () => {
     const uischema = cloneDeep(TEST_UISCHEMA);