From c0d5a34457776b60e4317e65ed325ad98a5789e5 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Thu, 24 Sep 2026 16:32:18 +0000
Subject: [PATCH 1/9] fix(angular-material): don't mutate the given ui schema
 in array layouts

ArrayLayoutRenderer#getProps was called from the template, i.e. on every
change detection cycle, and called setReadonly/unsetReadonly on the result of
findUISchema. For an inline options.detail - or a ui schema from the registry -
findUISchema hands back the very object the user passed in, and
setReadonly/unsetReadonly modify it in place.

While the array is empty getProps is never called, so the first "add" is the
first time options.readonly is written into the user's ui schema. Ancestor
layouts track their children by `path + JSON.stringify(uischema)`, so that write
changes the track key of the whole branch, NgForOf destroys and re-creates the
embedded view, and any state below it is lost. For a Categorization that means
the selected tab jumps back to the first one - only on the first "add", because
later ones write the same value.

findUISchema is now called from mapAdditionalProps instead of the template, its
result is copied before setting the readonly option, and it is only recalculated
when one of its inputs actually changed. The items' props are precalculated as
well, so that the template no longer hands a new object to jsonforms-outlet on
every change detection cycle - each of those made the outlet deep clone the
whole form state, once per item.

Also adds an example reproducing the issue.

Fixes #2343
---
 .../library/layouts/array-layout.renderer.ts  | 105 +++++++--
 .../angular-material/src/library/util/deps.ts |  40 ++++
 .../test/array-layout.spec.ts                 | 206 +++++++++++++++++-
 packages/angular-material/test/common/util.ts |   8 +-
 .../examples/src/examples/categorization.ts   |  65 ++++++
 5 files changed, 392 insertions(+), 32 deletions(-)
 create mode 100644 packages/angular-material/src/library/util/deps.ts

diff --git a/packages/angular-material/src/library/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
index 24626dc7a5..3d5d34092a 100644
--- a/packages/angular-material/src/library/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
@@ -52,6 +52,8 @@ import {
   UISchemaTester,
   unsetReadonly,
 } from '@jsonforms/core';
+import cloneDeep from 'lodash/cloneDeep';
+import { depsChanged } from '../util/deps';
 
 @Component({
   selector: 'app-array-layout-renderer',
@@ -84,7 +86,7 @@ import {
       <p *ngIf="noData">{{ translations.noDataMessage }}</p>
       <div
         *ngFor="
-          let item of [].constructor(data);
+          let item of itemProps;
           let idx = index;
           trackBy: trackByFn;
           last as last;
@@ -93,7 +95,7 @@ import {
       >
         <mat-card class="array-item" appearance="outlined">
           <mat-card-content>
-            <jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
+            <jsonforms-outlet [renderProps]="item"></jsonforms-outlet>
           </mat-card-content>
           <mat-card-actions *ngIf="isEnabled()">
             <button
@@ -184,10 +186,31 @@ export class ArrayLayoutRenderer
   moveItemUp: (path: string, index: number) => () => void;
   moveItemDown: (path: string, index: number) => () => void;
   removeItems: (path: string, toDelete: number[]) => () => void;
+  /**
+   * The registered UI schemas. Kept up to date for subclasses; the renderer
+   * itself resolves the item UI schema from the mapped props.
+   */
   uischemas: {
     tester: UISchemaTester;
     uischema: UISchemaElement;
   }[];
+  /**
+   * The UI schema to render for each of the array's items.
+   *
+   * This is always a defensive copy: `findUISchema` can hand back the inline
+   * `options.detail` UI schema or a UI schema from the registry, i.e. objects
+   * owned by the user, and we set the `readonly` option on it.
+   */
+  detailUiSchema: UISchemaElement;
+  /**
+   * The props to render each of the array's items with.
+   *
+   * Also determines how many items are rendered, so that the rendered items and
+   * their props can't get out of sync.
+   */
+  itemProps: OwnPropsOfRenderer[] = [];
+  private detailUiSchemaDeps: unknown[] | undefined;
+  private itemPropsDeps: unknown[] | undefined;
   mapToProps(
     state: JsonFormsState
   ): StatePropsOfArrayLayout & { translations: ArrayTranslations } {
@@ -234,27 +257,73 @@ export class ArrayLayoutRenderer
     this.noData = !props.data || props.data === 0;
     this.uischemas = props.uischemas;
     this.translations = props.translations;
+    this.detailUiSchema = this.resolveDetailUiSchema(props);
+    this.updateItemProps(props, this.detailUiSchema);
   }
-  getProps(index: number): OwnPropsOfRenderer {
-    const uischema = findUISchema(
-      this.uischemas,
-      this.scopedSchema,
-      this.uischema.scope,
-      this.propsPath,
-      undefined,
-      this.uischema,
-      this.rootSchema
+  private resolveDetailUiSchema(props: ArrayLayoutProps): UISchemaElement {
+    const deps = [
+      props.uischema,
+      props.uischemas,
+      props.schema,
+      props.rootSchema,
+      props.path,
+      this.isEnabled(),
+    ];
+    if (!depsChanged(this.detailUiSchemaDeps, deps)) {
+      return this.detailUiSchema;
+    }
+    this.detailUiSchemaDeps = deps;
+
+    // `findUISchema` can hand back the inline `options.detail` UI schema or a
+    // UI schema from the registry, i.e. objects owned by the user. We set the
+    // `readonly` option on the result, so we have to work on a copy.
+    const detailUiSchema = cloneDeep(
+      findUISchema(
+        props.uischemas,
+        props.schema,
+        props.uischema.scope,
+        props.path,
+        undefined,
+        props.uischema,
+        props.rootSchema
+      )
     );
     if (this.isEnabled()) {
-      unsetReadonly(uischema);
+      unsetReadonly(detailUiSchema);
     } else {
-      setReadonly(uischema);
+      setReadonly(detailUiSchema);
     }
-    return {
-      schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `${index}`),
-      uischema,
-    };
+    return detailUiSchema;
+  }
+  /**
+   * Precalculates the props of every item.
+   *
+   * These must not be created in the template: `jsonforms-outlet` re-evaluates
+   * its inputs whenever the bound object changes, and doing so deep clones the
+   * whole form state, which would then happen once per item per change
+   * detection cycle.
+   */
+  private updateItemProps(
+    props: ArrayLayoutProps,
+    detailUiSchema: UISchemaElement
+  ): void {
+    // `props.data` is the item count, but it is only derived from `length`, so
+    // it is `undefined` for data that isn't an array. Treat that as no items.
+    const itemCount = props.data > 0 ? props.data : 0;
+    const deps = [detailUiSchema, props.schema, props.path, itemCount];
+    if (!depsChanged(this.itemPropsDeps, deps)) {
+      return;
+    }
+    this.itemPropsDeps = deps;
+
+    this.itemProps = Array.from({ length: itemCount }, (_unused, index) => ({
+      schema: props.schema,
+      path: Paths.compose(props.path, `${index}`),
+      uischema: detailUiSchema,
+    }));
+  }
+  getProps(index: number): OwnPropsOfRenderer {
+    return this.itemProps[index];
   }
   trackByFn(index: number) {
     return index;
diff --git a/packages/angular-material/src/library/util/deps.ts b/packages/angular-material/src/library/util/deps.ts
new file mode 100644
index 0000000000..04867ae970
--- /dev/null
+++ b/packages/angular-material/src/library/util/deps.ts
@@ -0,0 +1,40 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+/**
+ * Compares two dependency arrays by reference, like React's `useMemo` deps.
+ *
+ * Renderers use this to only recalculate expensive, derived state when one of
+ * its inputs actually changed instead of on every emitted state. As with
+ * `useMemo`, a given call site is expected to always pass the same dependencies
+ * in the same order; the length is compared as well so that a call site which
+ * does not can't report "unchanged" for a shortened dependency list.
+ */
+export const depsChanged = (
+  previous: unknown[] | undefined,
+  next: unknown[]
+): boolean =>
+  previous === undefined ||
+  previous.length !== next.length ||
+  next.some((dep, index) => dep !== previous[index]);
diff --git a/packages/angular-material/test/array-layout.spec.ts b/packages/angular-material/test/array-layout.spec.ts
index ac8aeef55e..b6f8baa4b8 100644
--- a/packages/angular-material/test/array-layout.spec.ts
+++ b/packages/angular-material/test/array-layout.spec.ts
@@ -31,7 +31,13 @@ import {
   MatCardContent,
   MatCardActions,
 } from '@angular/material/card';
-import { beforeEachLayoutTest, setupMockStore } from './common';
+import { Actions, Layout } from '@jsonforms/core';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  beforeEachLayoutTest,
+  getJsonFormsService,
+  setupMockStore,
+} from './common';
 import {
   ArrayLayoutRenderer,
   ArrayLayoutRendererTester,
@@ -93,21 +99,23 @@ describe('Array layout tester', () => {
     ).toBe(4);
   });
 });
+const TEST_BED_CONFIG = {
+  declarations: [LayoutChildrenRenderPropsPipe],
+  imports: [
+    MatIcon,
+    MatBadge,
+    MatTooltip,
+    MatCard,
+    MatCardContent,
+    MatCardActions,
+  ],
+};
+
 describe('Array layout', () => {
   let fixture: ComponentFixture<any>;
 
   beforeEach(waitForAsync(() => {
-    fixture = beforeEachLayoutTest(ArrayLayoutRenderer, {
-      declarations: [LayoutChildrenRenderPropsPipe],
-      imports: [
-        MatIcon,
-        MatBadge,
-        MatTooltip,
-        MatCard,
-        MatCardContent,
-        MatCardActions,
-      ],
-    });
+    fixture = beforeEachLayoutTest(ArrayLayoutRenderer, TEST_BED_CONFIG);
   }));
 
   it('render with no data the error count should be 1', () => {
@@ -176,3 +184,177 @@ describe('Array layout', () => {
     });
   });
 });
+
+describe('Array layout ui schema handling', () => {
+  let fixture: ComponentFixture<ArrayLayoutRenderer>;
+
+  beforeEach(waitForAsync(() => {
+    fixture = beforeEachLayoutTest(ArrayLayoutRenderer, TEST_BED_CONFIG);
+  }));
+
+  // https://github.com/eclipsesource/jsonforms/issues/2343
+  it('does not modify the given ui schema when rendering items', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+    const pristine = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    expect(uischema).toEqual(pristine);
+  });
+
+  it('does not hand out the inline options.detail instance', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    const detail = fixture.componentInstance.getProps(0).uischema;
+    expect(detail).not.toBe(uischema.options.detail);
+    expect(detail.type).toBe('HorizontalLayout');
+  });
+
+  it('returns a stable copy of the detail ui schema across state emissions', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    const detail = fixture.componentInstance.getProps(0).uischema;
+    expect(detail).not.toBe(uischema.options.detail);
+
+    getJsonFormsService(fixture.componentInstance).updateCore(
+      Actions.update('test', () => [{}, {}])
+    );
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.getProps(0).uischema).toBe(detail);
+    expect(fixture.componentInstance.getProps(1).uischema).toBe(detail);
+  });
+
+  it('renders no items for data that is not an array', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      // schema violating data, which JSON Forms reports rather than rejects
+      data: { test: {} },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+
+    // must not render an item whose props were never calculated
+    expect(() => fixture.detectChanges()).not.toThrow();
+    expect(fixture.componentInstance.itemProps).toEqual([]);
+    expect(fixture.nativeElement.querySelectorAll('.array-item').length).toBe(
+      0
+    );
+  });
+
+  it('reuses the item props instead of recreating them per change detection cycle', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    const itemProps = fixture.componentInstance.getProps(0);
+    expect(fixture.componentInstance.getProps(0)).toBe(itemProps);
+
+    // an emission that leaves the array's structure alone must not invalidate
+    // them either, otherwise the outlet re-reads - and deep clones - the state
+    getJsonFormsService(fixture.componentInstance).updateCore(
+      Actions.update('test.0.test1', () => 'a value')
+    );
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.getProps(0)).toBe(itemProps);
+  });
+
+  it('clears the readonly option again when the array is re-enabled', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    getJsonFormsService(fixture.componentInstance).setReadonly(true);
+    fixture.detectChanges();
+
+    let detail = fixture.componentInstance.getProps(0).uischema as Layout;
+    expect(detail.elements[0].options.readonly).toBe(true);
+
+    // the detail is rebuilt from the original, so this is not sticky
+    getJsonFormsService(fixture.componentInstance).setReadonly(false);
+    fixture.detectChanges();
+
+    detail = fixture.componentInstance.getProps(0).uischema as Layout;
+    expect(detail.elements[0].options?.readonly).toBeFalsy();
+  });
+
+  it('does not modify a ui schema coming from the registry', () => {
+    const registered = {
+      type: 'HorizontalLayout',
+      elements: [{ type: 'Control', scope: '#/properties/test1' }],
+    };
+    const pristine = cloneDeep(registered);
+    // no options.detail, so the registry is consulted
+    const uischema = { type: 'Control', scope: '#/properties/test' };
+
+    fixture.componentInstance.disabled = true;
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    getJsonFormsService(fixture.componentInstance).setUiSchemas([
+      { tester: () => 2, uischema: registered },
+    ]);
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    const detail = fixture.componentInstance.getProps(0).uischema as Layout;
+    expect(registered).toEqual(pristine);
+    expect(detail).not.toBe(registered);
+    expect(detail.elements[0].options.readonly).toBe(true);
+  });
+
+  it('marks the detail ui schema readonly when disabled without touching the original', () => {
+    const uischema = cloneDeep(TEST_UISCHEMA);
+    const pristine = cloneDeep(TEST_UISCHEMA);
+
+    fixture.componentInstance.disabled = true;
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    const detail = fixture.componentInstance.getProps(0).uischema as Layout;
+    expect(detail.elements[0].options.readonly).toBe(true);
+    expect(uischema).toEqual(pristine);
+  });
+});
diff --git a/packages/angular-material/test/common/util.ts b/packages/angular-material/test/common/util.ts
index 12b7a6f4d4..a1c645e6c5 100644
--- a/packages/angular-material/test/common/util.ts
+++ b/packages/angular-material/test/common/util.ts
@@ -24,7 +24,11 @@
 */
 import type { Type } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import {
+  JsonFormsAbstractControl,
+  JsonFormsAngularService,
+  JsonFormsControl,
+} from '@jsonforms/angular';
 import type {
   JsonFormsRendererRegistryEntry,
   JsonSchema,
@@ -63,7 +67,7 @@ export interface TestData<T extends UISchemaElement> {
 }
 
 export const getJsonFormsService = (
-  component: JsonFormsControl
+  component: JsonFormsAbstractControl<any>
 ): JsonFormsAngularService => {
   return (component as any).jsonFormsService as JsonFormsAngularService;
 };
diff --git a/packages/examples/src/examples/categorization.ts b/packages/examples/src/examples/categorization.ts
index 6b70ba2fa1..287d3414c7 100644
--- a/packages/examples/src/examples/categorization.ts
+++ b/packages/examples/src/examples/categorization.ts
@@ -23,6 +23,7 @@
   THE SOFTWARE.
 */
 import { createTranslator, Translator } from '@jsonforms/core';
+import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import { registerExamples } from '../register';
 
@@ -286,6 +287,63 @@ const uischema_1713 = {
   ],
 };
 
+const schema_2343 = {
+  type: 'object',
+  properties: {
+    parc: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          id: {
+            type: 'string',
+          },
+        },
+      },
+    },
+  },
+};
+const arrayControl_2343 = {
+  type: 'Control',
+  scope: '#/properties/parc',
+  options: {
+    detail: {
+      type: 'VerticalLayout',
+      elements: [
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/id',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+const uischema_2343 = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Categorization',
+      elements: [
+        {
+          type: 'Category',
+          label: 'A1',
+          elements: [cloneDeep(arrayControl_2343)],
+        },
+        {
+          type: 'Category',
+          label: 'A2',
+          elements: [cloneDeep(arrayControl_2343)],
+        },
+      ],
+    },
+  ],
+};
+
 export const translations = {
   categoryLabelKey: 'Basic',
   address: {
@@ -312,4 +370,11 @@ registerExamples([
     schema: schema_1713,
     uischema: uischema_1713,
   },
+  {
+    name: 'categorization_2343',
+    label: 'Categorization - Issue 2343',
+    data: {},
+    schema: schema_2343,
+    uischema: uischema_2343,
+  },
 ]);

From 9def7a079ac7e78a8ee4ff8e56076368dd61884c Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Thu, 24 Sep 2026 16:33:17 +0000
Subject: [PATCH 2/9] fix(angular-material): don't mutate the given ui schema
 in object controls

ObjectControlRenderer wrote `type`, `label` and the `readonly` option directly
into the ui schema returned by findUISchema, which for an inline
options.detail - or a ui schema from the registry - is the very object the user
passed in. Besides corrupting the user's ui schema, this can destroy and
re-create unrelated parts of the form, because ancestor layouts track their
children by the serialized ui schema.

The result of findUISchema is now copied before it is modified, and it is only
recalculated when one of its inputs actually changed.

As a side effect this also fixes the detail staying readonly forever once the
control had been disabled: there was no branch undoing the previous
setReadonly, and now there is nothing to undo in the first place.
---
 .../src/library/other/object.renderer.ts      | 103 +++++++++++++-----
 .../test/object-control.spec.ts               |  82 ++++++++++++++
 2 files changed, 158 insertions(+), 27 deletions(-)

diff --git a/packages/angular-material/src/library/other/object.renderer.ts b/packages/angular-material/src/library/other/object.renderer.ts
index 1585c71484..18a556dfec 100644
--- a/packages/angular-material/src/library/other/object.renderer.ts
+++ b/packages/angular-material/src/library/other/object.renderer.ts
@@ -24,7 +24,13 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import startCase from 'lodash/startCase';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {
   JsonFormsControlWithDetail,
   JsonFormsModule,
@@ -36,23 +42,23 @@ import {
   Generate,
   GroupLayout,
   isObjectControl,
+  OwnPropsOfRenderer,
   RankedTester,
   rankWith,
   setReadonly,
   UISchemaElement,
 } from '@jsonforms/core';
 import cloneDeep from 'lodash/cloneDeep';
+import { depsChanged } from '../util/deps';
 
 @Component({
   selector: 'ObjectRenderer',
   template: `
     <mat-card class="object-layout" appearance="outlined">
       <jsonforms-outlet
-        [uischema]="detailUiSchema"
-        [schema]="scopedSchema"
-        [path]="propsPath"
-      >
-      </jsonforms-outlet>
+        *ngIf="renderProps"
+        [renderProps]="renderProps"
+      ></jsonforms-outlet>
     </mat-card>
   `,
   styles: [
@@ -63,40 +69,83 @@ import cloneDeep from 'lodash/cloneDeep';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [JsonFormsModule, MatCardModule],
+  imports: [CommonModule, JsonFormsModule, MatCardModule],
 })
 export class ObjectControlRenderer extends JsonFormsControlWithDetail {
+  /**
+   * The UI schema to render for the object's detail.
+   *
+   * This is always a defensive copy: `findUISchema` can hand back the inline
+   * `options.detail` UI schema or a UI schema from the registry, i.e. objects
+   * owned by the user, and we modify the result below.
+   */
   detailUiSchema: UISchemaElement;
+  /**
+   * The props to render the detail with.
+   *
+   * Bound as a whole instead of as separate `uischema`, `schema` and `path`
+   * inputs: `jsonforms-outlet` only re-dispatches when its `renderProps` setter
+   * is called, so with separate inputs a new detail UI schema would only be
+   * picked up on the next emitted state.
+   */
+  renderProps: OwnPropsOfRenderer;
+  private detailUiSchemaDeps: unknown[] | undefined;
+  private changeDetectorRef = inject(ChangeDetectorRef);
   mapAdditionalProps(props: ControlWithDetailProps) {
-    this.detailUiSchema = findUISchema(
+    const deps = [
+      props.uischema,
       props.uischemas,
       props.schema,
-      props.uischema.scope,
+      props.rootSchema,
       props.path,
-      () => {
-        const newSchema = cloneDeep(props.schema);
-        // delete unsupported operators
-        delete newSchema.oneOf;
-        delete newSchema.anyOf;
-        delete newSchema.allOf;
-        return Generate.uiSchema(
-          newSchema,
-          'Group',
-          undefined,
-          this.rootSchema
-        );
-      },
-      props.uischema,
-      props.rootSchema
+      this.isEnabled(),
+    ];
+    if (!depsChanged(this.detailUiSchemaDeps, deps)) {
+      return;
+    }
+    this.detailUiSchemaDeps = deps;
+
+    const detailUiSchema = cloneDeep(
+      findUISchema(
+        props.uischemas,
+        props.schema,
+        props.uischema.scope,
+        props.path,
+        () => {
+          const newSchema = cloneDeep(props.schema);
+          // delete unsupported operators
+          delete newSchema.oneOf;
+          delete newSchema.anyOf;
+          delete newSchema.allOf;
+          return Generate.uiSchema(
+            newSchema,
+            'Group',
+            undefined,
+            this.rootSchema
+          );
+        },
+        props.uischema,
+        props.rootSchema
+      )
     );
     if (isEmpty(props.path)) {
-      this.detailUiSchema.type = 'VerticalLayout';
+      detailUiSchema.type = 'VerticalLayout';
     } else {
-      (this.detailUiSchema as GroupLayout).label = startCase(props.path);
+      (detailUiSchema as GroupLayout).label = startCase(props.path);
     }
     if (!this.isEnabled()) {
-      setReadonly(this.detailUiSchema);
+      setReadonly(detailUiSchema);
     }
+    this.detailUiSchema = detailUiSchema;
+    this.renderProps = {
+      uischema: detailUiSchema,
+      schema: props.schema,
+      path: props.path,
+    };
+    // the component is OnPush and nothing below it reports the change, so
+    // without this the new detail is not rendered until the view happens to be
+    // checked for an unrelated reason
+    this.changeDetectorRef.markForCheck();
   }
 }
 export const ObjectControlRendererTester: RankedTester = rankWith(
diff --git a/packages/angular-material/test/object-control.spec.ts b/packages/angular-material/test/object-control.spec.ts
index 5495118576..c6a8f4a808 100644
--- a/packages/angular-material/test/object-control.spec.ts
+++ b/packages/angular-material/test/object-control.spec.ts
@@ -23,6 +23,7 @@
   THE SOFTWARE.
 */
 import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
@@ -30,7 +31,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { JsonFormsAngularService, JsonFormsModule } from '@jsonforms/angular';
+import { By } from '@angular/platform-browser';
 import { ControlElement } from '@jsonforms/core';
+import cloneDeep from 'lodash/cloneDeep';
 import {
   GroupLayoutRenderer,
   groupLayoutTester,
@@ -214,4 +217,83 @@ describe('Object Control', () => {
       expect(fixture.nativeElement.querySelector('input').disabled).toBeFalsy();
     });
   }));
+
+  it('does not modify the given ui schema', () => {
+    const uischema = {
+      type: 'Control',
+      scope: '#/properties/foo',
+      options: {
+        detail: {
+          type: 'Group',
+          elements: [{ type: 'Control', scope: '#/properties/foo_1' }],
+        },
+      },
+    };
+    const pristine = cloneDeep(uischema);
+
+    component.uischema = uischema;
+    component.schema = schema2;
+    component.disabled = true;
+    getJsonFormsService(component).init({
+      core: {
+        data: {},
+        schema: schema2,
+        uischema: undefined,
+      },
+    });
+    getJsonFormsService(component).registerRenderers(renderers);
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    expect(uischema).toEqual(pristine);
+    expect(component.detailUiSchema).not.toBe(uischema.options.detail);
+    expect(component.detailUiSchema.elements[0].options.readonly).toBe(true);
+  });
+
+  it('propagates a changed enabled state to the rendered detail', () => {
+    const uischema = {
+      type: 'Control',
+      scope: '#/properties/foo',
+      options: {
+        detail: {
+          type: 'Group',
+          elements: [{ type: 'Control', scope: '#/properties/foo_1' }],
+        },
+      },
+    };
+
+    component.uischema = uischema;
+    component.schema = schema2;
+    getJsonFormsService(component).init({
+      core: {
+        data: {},
+        schema: schema2,
+        uischema: undefined,
+      },
+    });
+    getJsonFormsService(component).registerRenderers(renderers);
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    const detailControl = () =>
+      fixture.debugElement.query(By.directive(TextControlRenderer))
+        .componentInstance;
+
+    expect(detailControl().uischema.options?.readonly).toBeFalsy();
+
+    // the component is OnPush and nothing below it reports the change, so in a
+    // real form it has to schedule the check itself. As the fixture root it is
+    // checked unconditionally, hence the explicit expectation below.
+    const changeDetectorRef = component.changeDetectorRef as ChangeDetectorRef;
+    spyOn(changeDetectorRef, 'markForCheck').and.callThrough();
+
+    getJsonFormsService(component).setReadonly(true);
+    expect(changeDetectorRef.markForCheck).toHaveBeenCalled();
+    fixture.detectChanges();
+    expect(detailControl().uischema.options.readonly).toBe(true);
+
+    getJsonFormsService(component).setReadonly(false);
+    fixture.detectChanges();
+    expect(detailControl().uischema.options?.readonly).toBeFalsy();
+  });
 });

From 396c9d6d13aedceb20d8d9a2e4942e6d26e4db96 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Thu, 24 Sep 2026 16:34:42 +0000
Subject: [PATCH 3/9] fix(angular-material): don't mutate the given ui schema
 in list with detail

MasterListComponent set the readonly option directly on the ui schema returned
by findUISchema, which for an inline options.detail - or a ui schema from the
registry - is the very object the user passed in. Besides corrupting the user's
ui schema, this can destroy and re-create unrelated parts of the form, because
ancestor layouts track their children by the serialized ui schema.

The result of findUISchema is now copied before the readonly option is set, and
it is only recalculated when one of its inputs actually changed - which also
keeps the detail's ui schema reference stable while items are added or removed.

As a side effect this also fixes the detail staying readonly forever once the
control had been disabled.
---
 .../src/library/other/master-detail/master.ts | 62 ++++++++++++++-----
 .../test/master-detail.spec.ts                | 21 +++++++
 2 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/packages/angular-material/src/library/other/master-detail/master.ts b/packages/angular-material/src/library/other/master-detail/master.ts
index e0b539592a..5689fde5c7 100644
--- a/packages/angular-material/src/library/other/master-detail/master.ts
+++ b/packages/angular-material/src/library/other/master-detail/master.ts
@@ -56,8 +56,11 @@ import {
   setReadonly,
   StatePropsOfArrayControl,
   uiTypeIs,
+  UISchemaElement,
 } from '@jsonforms/core';
+import cloneDeep from 'lodash/cloneDeep';
 import { JsonFormsDetailComponent } from './detail';
+import { depsChanged } from '../../util/deps';
 
 const keywords = ['#', 'properties', 'items'];
 
@@ -183,6 +186,15 @@ export class MasterListComponent
   removeItems: (path: string, toDelete: number[]) => () => void;
   highlightedIdx: number;
   translations: ArrayTranslations;
+  /**
+   * The UI schema to render for the selected item.
+   *
+   * This is always a defensive copy: `findUISchema` can hand back the inline
+   * `options.detail` UI schema or a UI schema from the registry, i.e. objects
+   * owned by the user, and we set the `readonly` option on it.
+   */
+  detailUISchema: UISchemaElement;
+  private detailUISchemaDeps: unknown[] | undefined;
 
   private changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -210,19 +222,7 @@ export class MasterListComponent
     const { data, path, schema, uischema } = props;
     const controlElement = uischema as ControlElement;
     this.propsPath = props.path;
-    const detailUISchema = findUISchema(
-      props.uischemas,
-      schema,
-      `${controlElement.scope}/items`,
-      props.path,
-      'VerticalLayout',
-      controlElement,
-      props.rootSchema
-    );
-
-    if (!this.isEnabled()) {
-      setReadonly(detailUISchema);
-    }
+    this.updateDetailUiSchema(props, controlElement);
 
     this.translations = props.translations;
 
@@ -238,7 +238,7 @@ export class MasterListComponent
         data: d,
         path: `${path}.${index}`,
         schema,
-        uischema: detailUISchema,
+        uischema: this.detailUISchema,
       };
       return masterItem;
     });
@@ -278,6 +278,40 @@ export class MasterListComponent
     this.changeDetectorRef.markForCheck();
   }
 
+  private updateDetailUiSchema(
+    props: ArrayControlProps,
+    controlElement: ControlElement
+  ): void {
+    const deps = [
+      props.uischema,
+      props.uischemas,
+      props.schema,
+      props.rootSchema,
+      props.path,
+      this.isEnabled(),
+    ];
+    if (!depsChanged(this.detailUISchemaDeps, deps)) {
+      return;
+    }
+    this.detailUISchemaDeps = deps;
+
+    const detailUISchema = cloneDeep(
+      findUISchema(
+        props.uischemas,
+        props.schema,
+        `${controlElement.scope}/items`,
+        props.path,
+        'VerticalLayout',
+        controlElement,
+        props.rootSchema
+      )
+    );
+    if (!this.isEnabled()) {
+      setReadonly(detailUISchema);
+    }
+    this.detailUISchema = detailUISchema;
+  }
+
   onSelect(item: any, idx: number): void {
     this.selectedItem = item;
     this.selectedItemIdx = idx;
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
index 034587cff3..ac368187b2 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -36,6 +36,7 @@ import { JsonFormsDetailComponent } from '../src/library/other/master-detail/det
 import { getJsonFormsService, setupMockStore } from './common';
 import { Actions } from '@jsonforms/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import cloneDeep from 'lodash/cloneDeep';
 
 describe('Master detail', () => {
   let fixture: ComponentFixture<MasterListComponent>;
@@ -400,4 +401,24 @@ describe('Master detail', () => {
       expect(fixture.nativeElement.children[0].style.display).toBe('none');
     });
   }));
+
+  it('does not modify the given ui schema', () => {
+    const ownUischema = cloneDeep(uischema);
+    const pristine = cloneDeep(uischema);
+
+    setupMockStore(fixture, { uischema: ownUischema, schema, data });
+    getJsonFormsService(component).updateCore(Actions.init(data, schema));
+    component.ngOnInit();
+    getJsonFormsService(component).setReadonly(true);
+    fixture.detectChanges();
+
+    expect(ownUischema).toEqual(pristine);
+    expect(component.detailUISchema).not.toBe(ownUischema.options.detail);
+    expect(component.detailUISchema.elements[0].options.readonly).toBe(true);
+
+    // the detail is rebuilt from the original, so re-enabling actually restores it
+    getJsonFormsService(component).setReadonly(false);
+    fixture.detectChanges();
+    expect(component.detailUISchema.elements[0].options?.readonly).toBeFalsy();
+  });
 });

From 22883dfc5e36bb8f5772578a127444a5d83b0c80 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Thu, 24 Sep 2026 16:35:25 +0000
Subject: [PATCH 4/9] fix(angular-material): honor readonly detail controls in
 array layouts

ArrayLayoutRenderer called unsetReadonly on the item's ui schema whenever the
array was enabled. That only existed to undo the renderer's own setReadonly
call, which it no longer performs on the user's ui schema - the item ui schema
is now rebuilt from the original whenever the enabled state changes.

All unsetReadonly did on top of that was overwrite a readonly option the user
had deliberately set on a control inside options.detail, so it is removed.
---
 MIGRATION.md                                  | 15 +++++++++
 .../library/layouts/array-layout.renderer.ts  |  5 +--
 .../test/array-layout.spec.ts                 | 32 +++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index f21c331cb4..49cadb5871 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2,6 +2,21 @@
 
 ## Migration to JSON Forms 3.9
 
+### Angular Material detail renderers no longer modify the given UI schema
+
+The Angular Material array layout, object control and list-with-detail renderers determine the UI schema for their contents via `findUISchema`, which returns the inline `options.detail` UI schema or a UI schema from the `uischemas` registry as-is, i.e. the very object the application passed in.
+These renderers then modified that result in place, i.e. they modified the application's UI schema (see [#2343](https://github.com/eclipsesource/jsonforms/issues/2343)).
+All three set the `readonly` option on it; the object control additionally overwrote the detail's `type` and `label`.
+They now work on a copy instead.
+
+Consequences:
+
+- Nothing is written into your UI schema anymore. If you relied on reading the `readonly` option, the `type` or the `label` back out of your own object, you need to track that state yourself.
+- The array layout no longer forces the `readonly` option to `false` on the controls of an enabled array's detail. That option takes precedence over both the global config and the JSON schema, so the write suppressed all of them. For controls inside an array's `options.detail`, the following now take effect where they previously did not, in this order of precedence: a `readonly`/`readOnly` option you set yourself, a `readonly`/`readOnly` entry in the global config, and a `readOnly: true` in the corresponding JSON schema. If a field inside an array detail unexpectedly became readonly, one of these is now being honored.
+- The detail UI schema is only recalculated when one of its inputs changes. Modifying your UI schema in place, without replacing the object, is not picked up - as everywhere else in JSON Forms, provide a new UI schema object instead.
+- The array layout renders one item per array entry. Previously, data that was neither an array nor empty - for example an object at a path the schema declares as an array - rendered a single item at a path that does not exist, next to the "No data" message. Such data now renders no items at all. It is still reported as a validation error as before.
+- `ArrayLayoutRenderer` now precalculates the props of its items in `mapAdditionalProps` and exposes them as `itemProps`, which also drives how many items are rendered. `getProps(index)` reads from that array and returns `undefined` for an out of range index instead of synthesizing props. If you subclass the renderer and override `mapAdditionalProps`, call `super.mapAdditionalProps(props)`, otherwise no items are rendered.
+
 ### Data update paths treat all segments literally
 
 Data updates (e.g. dispatched `update` actions) previously wrote to the form data via lodash's `set`/`unset`, which interpret bracket notation and array indices in paths.
diff --git a/packages/angular-material/src/library/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
index 3d5d34092a..2d6deeb0fd 100644
--- a/packages/angular-material/src/library/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
@@ -50,7 +50,6 @@ import {
   StatePropsOfArrayLayout,
   UISchemaElement,
   UISchemaTester,
-  unsetReadonly,
 } from '@jsonforms/core';
 import cloneDeep from 'lodash/cloneDeep';
 import { depsChanged } from '../util/deps';
@@ -288,9 +287,7 @@ export class ArrayLayoutRenderer
         props.rootSchema
       )
     );
-    if (this.isEnabled()) {
-      unsetReadonly(detailUiSchema);
-    } else {
+    if (!this.isEnabled()) {
       setReadonly(detailUiSchema);
     }
     return detailUiSchema;
diff --git a/packages/angular-material/test/array-layout.spec.ts b/packages/angular-material/test/array-layout.spec.ts
index b6f8baa4b8..82ed46407e 100644
--- a/packages/angular-material/test/array-layout.spec.ts
+++ b/packages/angular-material/test/array-layout.spec.ts
@@ -357,4 +357,36 @@ describe('Array layout ui schema handling', () => {
     expect(detail.elements[0].options.readonly).toBe(true);
     expect(uischema).toEqual(pristine);
   });
+
+  it('keeps a readonly option set on a detail control when enabled', () => {
+    const uischema = {
+      type: 'Control',
+      scope: '#/properties/test',
+      options: {
+        detail: {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/test1',
+              options: { readonly: true },
+            },
+            { type: 'Control', scope: '#/properties/test2' },
+          ],
+        },
+      },
+    };
+
+    setupMockStore(fixture, {
+      data: { test: [{}] },
+      schema: TEST_SCHEMA,
+      uischema,
+    });
+    fixture.componentInstance.ngOnInit();
+    fixture.detectChanges();
+
+    const detail = fixture.componentInstance.getProps(0).uischema as Layout;
+    expect(detail.elements[0].options.readonly).toBe(true);
+    expect(detail.elements[1].options?.readonly).toBeUndefined();
+  });
 });

From 14ec315694f5fc1bf024d82a67d80f0712ab0cbc Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 25 Sep 2026 08:58:49 +0000
Subject: [PATCH 5/9] 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.
---
 .../library/layouts/array-layout.renderer.ts  | 15 ++++++++++-
 .../test/array-layout.spec.ts                 | 26 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/angular-material/src/library/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
index 2d6deeb0fd..2e73dc3aa9 100644
--- a/packages/angular-material/src/library/layouts/array-layout.renderer.ts
+++ b/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 = [
diff --git a/packages/angular-material/test/array-layout.spec.ts b/packages/angular-material/test/array-layout.spec.ts
index 82ed46407e..af91f98233 100644
--- a/packages/angular-material/test/array-layout.spec.ts
+++ b/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);
 

From 45c64956e82ddb4f91257bd9b69aaff60ca28de1 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Mon, 28 Sep 2026 10:02:53 +0000
Subject: [PATCH 6/9] test(angular-material): don't let ui schema mutation
 tests depend on test order

The array layout tests shared a single TEST_UISCHEMA object. The earlier tests
hand it to the renderer directly, so with the old, mutating renderer the
"pristine" copy taken by the later tests already contained the mutation, and
those tests only failed when run in isolation.

TEST_UISCHEMA is replaced by a factory, so every test - and every pristine
copy - gets its own fresh literal.
---
 .../test/array-layout.spec.ts                 | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/angular-material/test/array-layout.spec.ts b/packages/angular-material/test/array-layout.spec.ts
index af91f98233..b9d9ac812d 100644
--- a/packages/angular-material/test/array-layout.spec.ts
+++ b/packages/angular-material/test/array-layout.spec.ts
@@ -70,7 +70,8 @@ const TEST_SCHEMA = {
   required: ['test'],
 };
 
-const TEST_UISCHEMA = {
+// a factory, so that tests can't observe each other's modifications
+const createTestUiSchema = () => ({
   type: 'Control',
   scope: '#/properties/test',
   options: {
@@ -88,12 +89,12 @@ const TEST_UISCHEMA = {
       ],
     },
   },
-};
+});
 
 describe('Array layout tester', () => {
   it('should succeed', () => {
     expect(
-      ArrayLayoutRendererTester(TEST_UISCHEMA, TEST_SCHEMA, {
+      ArrayLayoutRendererTester(createTestUiSchema(), TEST_SCHEMA, {
         config: {},
         rootSchema: {},
       })
@@ -123,7 +124,7 @@ describe('Array layout', () => {
     setupMockStore(fixture, {
       data: {},
       schema: TEST_SCHEMA,
-      uischema: TEST_UISCHEMA,
+      uischema: createTestUiSchema(),
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -147,7 +148,7 @@ describe('Array layout', () => {
     setupMockStore(fixture, {
       data: { test: [{}] },
       schema: TEST_SCHEMA,
-      uischema: TEST_UISCHEMA,
+      uischema: createTestUiSchema(),
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -168,7 +169,7 @@ describe('Array layout', () => {
     setupMockStore(fixture, {
       data: { test: [{}, {}] },
       schema: TEST_SCHEMA,
-      uischema: TEST_UISCHEMA,
+      uischema: createTestUiSchema(),
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -195,8 +196,8 @@ describe('Array layout ui schema handling', () => {
 
   // https://github.com/eclipsesource/jsonforms/issues/2343
   it('does not modify the given ui schema when rendering items', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
-    const pristine = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
+    const pristine = createTestUiSchema();
 
     setupMockStore(fixture, {
       data: { test: [{}] },
@@ -210,7 +211,7 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('does not hand out the inline options.detail instance', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
 
     setupMockStore(fixture, {
       data: { test: [{}] },
@@ -226,7 +227,7 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('returns a stable copy of the detail ui schema across state emissions', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
 
     setupMockStore(fixture, {
       data: { test: [{}] },
@@ -249,7 +250,7 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('schedules a check so that state changes reach the template', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
 
     setupMockStore(fixture, {
       data: { test: [{}] },
@@ -274,7 +275,7 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('renders no items for data that is not an array', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
 
     setupMockStore(fixture, {
       // schema violating data, which JSON Forms reports rather than rejects
@@ -293,7 +294,7 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('reuses the item props instead of recreating them per change detection cycle', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
 
     setupMockStore(fixture, {
       data: { test: [{}] },
@@ -317,7 +318,7 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('clears the readonly option again when the array is re-enabled', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
 
     setupMockStore(fixture, {
       data: { test: [{}] },
@@ -367,8 +368,8 @@ describe('Array layout ui schema handling', () => {
   });
 
   it('marks the detail ui schema readonly when disabled without touching the original', () => {
-    const uischema = cloneDeep(TEST_UISCHEMA);
-    const pristine = cloneDeep(TEST_UISCHEMA);
+    const uischema = createTestUiSchema();
+    const pristine = createTestUiSchema();
 
     fixture.componentInstance.disabled = true;
     setupMockStore(fixture, {

From 6630d2a642f1694e9361cb59435830f15da683bd Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Mon, 28 Sep 2026 10:02:53 +0000
Subject: [PATCH 7/9] refactor(angular-material): share detail ui schema
 resolution between renderers

The array layout, the object control and the list with detail each resolved
their detail ui schema with the same memoized block: the same six dependencies,
findUISchema, a defensive copy and setReadonly when disabled. This is moved into
createDetailUiSchemaResolver next to depsChanged, so the three can't drift
apart. MasterListComponent#detailUISchema is renamed to detailUiSchema to match
the other two.

The comments introduced alongside are trimmed to the density of the
surrounding code; the reason for the copy is documented once, on the helper.
---
 .../library/layouts/array-layout.renderer.ts  | 77 +++---------------
 .../src/library/other/master-detail/master.ts | 59 +++-----------
 .../src/library/other/object.renderer.ts      | 80 +++++-------------
 .../angular-material/src/library/util/deps.ts |  6 --
 .../src/library/util/detail-uischema.ts       | 81 +++++++++++++++++++
 .../test/master-detail.spec.ts                |  6 +-
 6 files changed, 127 insertions(+), 182 deletions(-)
 create mode 100644 packages/angular-material/src/library/util/detail-uischema.ts

diff --git a/packages/angular-material/src/library/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
index 2e73dc3aa9..74020649ed 100644
--- a/packages/angular-material/src/library/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
@@ -42,7 +42,6 @@ import {
   ArrayTranslations,
   createDefaultValue,
   defaultJsonFormsI18nState,
-  findUISchema,
   getArrayTranslations,
   isObjectArrayWithNesting,
   JsonFormsState,
@@ -52,13 +51,12 @@ import {
   Paths,
   RankedTester,
   rankWith,
-  setReadonly,
   StatePropsOfArrayLayout,
   UISchemaElement,
   UISchemaTester,
 } from '@jsonforms/core';
-import cloneDeep from 'lodash/cloneDeep';
 import { depsChanged } from '../util/deps';
+import { createDetailUiSchemaResolver } from '../util/detail-uischema';
 
 @Component({
   selector: 'app-array-layout-renderer',
@@ -191,30 +189,14 @@ export class ArrayLayoutRenderer
   moveItemUp: (path: string, index: number) => () => void;
   moveItemDown: (path: string, index: number) => () => void;
   removeItems: (path: string, toDelete: number[]) => () => void;
-  /**
-   * The registered UI schemas. Kept up to date for subclasses; the renderer
-   * itself resolves the item UI schema from the mapped props.
-   */
   uischemas: {
     tester: UISchemaTester;
     uischema: UISchemaElement;
   }[];
-  /**
-   * The UI schema to render for each of the array's items.
-   *
-   * This is always a defensive copy: `findUISchema` can hand back the inline
-   * `options.detail` UI schema or a UI schema from the registry, i.e. objects
-   * owned by the user, and we set the `readonly` option on it.
-   */
   detailUiSchema: UISchemaElement;
-  /**
-   * The props to render each of the array's items with.
-   *
-   * Also determines how many items are rendered, so that the rendered items and
-   * their props can't get out of sync.
-   */
+  /** Also determines how many items are rendered. */
   itemProps: OwnPropsOfRenderer[] = [];
-  private detailUiSchemaDeps: unknown[] | undefined;
+  private resolveDetailUiSchema = createDetailUiSchemaResolver();
   private itemPropsDeps: unknown[] | undefined;
   private changeDetectorRef = inject(ChangeDetectorRef);
   mapToProps(
@@ -263,55 +245,18 @@ export class ArrayLayoutRenderer
     this.noData = !props.data || props.data === 0;
     this.uischemas = props.uischemas;
     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 = [
-      props.uischema,
-      props.uischemas,
-      props.schema,
-      props.rootSchema,
-      props.path,
+    this.detailUiSchema = this.resolveDetailUiSchema(
+      props,
       this.isEnabled(),
-    ];
-    if (!depsChanged(this.detailUiSchemaDeps, deps)) {
-      return this.detailUiSchema;
-    }
-    this.detailUiSchemaDeps = deps;
-
-    // `findUISchema` can hand back the inline `options.detail` UI schema or a
-    // UI schema from the registry, i.e. objects owned by the user. We set the
-    // `readonly` option on the result, so we have to work on a copy.
-    const detailUiSchema = cloneDeep(
-      findUISchema(
-        props.uischemas,
-        props.schema,
-        props.uischema.scope,
-        props.path,
-        undefined,
-        props.uischema,
-        props.rootSchema
-      )
+      props.uischema.scope
     );
-    if (!this.isEnabled()) {
-      setReadonly(detailUiSchema);
-    }
-    return detailUiSchema;
+    this.updateItemProps(props, this.detailUiSchema);
+    // OnPush: changes without an event in this view must schedule the check
+    this.changeDetectorRef.markForCheck();
   }
   /**
-   * Precalculates the props of every item.
-   *
-   * These must not be created in the template: `jsonforms-outlet` re-evaluates
-   * its inputs whenever the bound object changes, and doing so deep clones the
-   * whole form state, which would then happen once per item per change
-   * detection cycle.
+   * Not created in the template: each new object makes the outlet deep clone
+   * the whole form state.
    */
   private updateItemProps(
     props: ArrayLayoutProps,
diff --git a/packages/angular-material/src/library/other/master-detail/master.ts b/packages/angular-material/src/library/other/master-detail/master.ts
index 5689fde5c7..c23ea8dca8 100644
--- a/packages/angular-material/src/library/other/master-detail/master.ts
+++ b/packages/angular-material/src/library/other/master-detail/master.ts
@@ -45,7 +45,6 @@ import {
   createDefaultValue,
   decode,
   defaultJsonFormsI18nState,
-  findUISchema,
   getArrayTranslations,
   getFirstPrimitiveProp,
   JsonFormsState,
@@ -53,14 +52,12 @@ import {
   mapStateToArrayControlProps,
   RankedTester,
   rankWith,
-  setReadonly,
   StatePropsOfArrayControl,
   uiTypeIs,
   UISchemaElement,
 } from '@jsonforms/core';
-import cloneDeep from 'lodash/cloneDeep';
 import { JsonFormsDetailComponent } from './detail';
-import { depsChanged } from '../../util/deps';
+import { createDetailUiSchemaResolver } from '../../util/detail-uischema';
 
 const keywords = ['#', 'properties', 'items'];
 
@@ -186,15 +183,8 @@ export class MasterListComponent
   removeItems: (path: string, toDelete: number[]) => () => void;
   highlightedIdx: number;
   translations: ArrayTranslations;
-  /**
-   * The UI schema to render for the selected item.
-   *
-   * This is always a defensive copy: `findUISchema` can hand back the inline
-   * `options.detail` UI schema or a UI schema from the registry, i.e. objects
-   * owned by the user, and we set the `readonly` option on it.
-   */
-  detailUISchema: UISchemaElement;
-  private detailUISchemaDeps: unknown[] | undefined;
+  detailUiSchema: UISchemaElement;
+  private resolveDetailUiSchema = createDetailUiSchemaResolver();
 
   private changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -222,7 +212,12 @@ export class MasterListComponent
     const { data, path, schema, uischema } = props;
     const controlElement = uischema as ControlElement;
     this.propsPath = props.path;
-    this.updateDetailUiSchema(props, controlElement);
+    this.detailUiSchema = this.resolveDetailUiSchema(
+      props,
+      this.isEnabled(),
+      `${controlElement.scope}/items`,
+      'VerticalLayout'
+    );
 
     this.translations = props.translations;
 
@@ -238,7 +233,7 @@ export class MasterListComponent
         data: d,
         path: `${path}.${index}`,
         schema,
-        uischema: this.detailUISchema,
+        uischema: this.detailUiSchema,
       };
       return masterItem;
     });
@@ -278,40 +273,6 @@ export class MasterListComponent
     this.changeDetectorRef.markForCheck();
   }
 
-  private updateDetailUiSchema(
-    props: ArrayControlProps,
-    controlElement: ControlElement
-  ): void {
-    const deps = [
-      props.uischema,
-      props.uischemas,
-      props.schema,
-      props.rootSchema,
-      props.path,
-      this.isEnabled(),
-    ];
-    if (!depsChanged(this.detailUISchemaDeps, deps)) {
-      return;
-    }
-    this.detailUISchemaDeps = deps;
-
-    const detailUISchema = cloneDeep(
-      findUISchema(
-        props.uischemas,
-        props.schema,
-        `${controlElement.scope}/items`,
-        props.path,
-        'VerticalLayout',
-        controlElement,
-        props.rootSchema
-      )
-    );
-    if (!this.isEnabled()) {
-      setReadonly(detailUISchema);
-    }
-    this.detailUISchema = detailUISchema;
-  }
-
   onSelect(item: any, idx: number): void {
     this.selectedItem = item;
     this.selectedItemIdx = idx;
diff --git a/packages/angular-material/src/library/other/object.renderer.ts b/packages/angular-material/src/library/other/object.renderer.ts
index 18a556dfec..68f754c18a 100644
--- a/packages/angular-material/src/library/other/object.renderer.ts
+++ b/packages/angular-material/src/library/other/object.renderer.ts
@@ -38,18 +38,16 @@ import {
 import { MatCardModule } from '@angular/material/card';
 import {
   ControlWithDetailProps,
-  findUISchema,
   Generate,
   GroupLayout,
   isObjectControl,
   OwnPropsOfRenderer,
   RankedTester,
   rankWith,
-  setReadonly,
   UISchemaElement,
 } from '@jsonforms/core';
 import cloneDeep from 'lodash/cloneDeep';
-import { depsChanged } from '../util/deps';
+import { createDetailUiSchemaResolver } from '../util/detail-uischema';
 
 @Component({
   selector: 'ObjectRenderer',
@@ -72,79 +70,45 @@ import { depsChanged } from '../util/deps';
   imports: [CommonModule, JsonFormsModule, MatCardModule],
 })
 export class ObjectControlRenderer extends JsonFormsControlWithDetail {
-  /**
-   * The UI schema to render for the object's detail.
-   *
-   * This is always a defensive copy: `findUISchema` can hand back the inline
-   * `options.detail` UI schema or a UI schema from the registry, i.e. objects
-   * owned by the user, and we modify the result below.
-   */
   detailUiSchema: UISchemaElement;
-  /**
-   * The props to render the detail with.
-   *
-   * Bound as a whole instead of as separate `uischema`, `schema` and `path`
-   * inputs: `jsonforms-outlet` only re-dispatches when its `renderProps` setter
-   * is called, so with separate inputs a new detail UI schema would only be
-   * picked up on the next emitted state.
-   */
+  /** Bound as a whole, as the outlet only re-dispatches when this is set. */
   renderProps: OwnPropsOfRenderer;
-  private detailUiSchemaDeps: unknown[] | undefined;
+  private resolveDetailUiSchema = createDetailUiSchemaResolver();
   private changeDetectorRef = inject(ChangeDetectorRef);
   mapAdditionalProps(props: ControlWithDetailProps) {
-    const deps = [
-      props.uischema,
-      props.uischemas,
-      props.schema,
-      props.rootSchema,
-      props.path,
+    const detailUiSchema = this.resolveDetailUiSchema(
+      props,
       this.isEnabled(),
-    ];
-    if (!depsChanged(this.detailUiSchemaDeps, deps)) {
+      props.uischema.scope,
+      () => {
+        const newSchema = cloneDeep(props.schema);
+        // delete unsupported operators
+        delete newSchema.oneOf;
+        delete newSchema.anyOf;
+        delete newSchema.allOf;
+        return Generate.uiSchema(
+          newSchema,
+          'Group',
+          undefined,
+          this.rootSchema
+        );
+      }
+    );
+    if (detailUiSchema === this.detailUiSchema) {
       return;
     }
-    this.detailUiSchemaDeps = deps;
-
-    const detailUiSchema = cloneDeep(
-      findUISchema(
-        props.uischemas,
-        props.schema,
-        props.uischema.scope,
-        props.path,
-        () => {
-          const newSchema = cloneDeep(props.schema);
-          // delete unsupported operators
-          delete newSchema.oneOf;
-          delete newSchema.anyOf;
-          delete newSchema.allOf;
-          return Generate.uiSchema(
-            newSchema,
-            'Group',
-            undefined,
-            this.rootSchema
-          );
-        },
-        props.uischema,
-        props.rootSchema
-      )
-    );
     if (isEmpty(props.path)) {
       detailUiSchema.type = 'VerticalLayout';
     } else {
       (detailUiSchema as GroupLayout).label = startCase(props.path);
     }
-    if (!this.isEnabled()) {
-      setReadonly(detailUiSchema);
-    }
     this.detailUiSchema = detailUiSchema;
     this.renderProps = {
       uischema: detailUiSchema,
       schema: props.schema,
       path: props.path,
     };
-    // the component is OnPush and nothing below it reports the change, so
-    // without this the new detail is not rendered until the view happens to be
-    // checked for an unrelated reason
+    // OnPush: nothing below reports the new detail, so schedule the check
     this.changeDetectorRef.markForCheck();
   }
 }
diff --git a/packages/angular-material/src/library/util/deps.ts b/packages/angular-material/src/library/util/deps.ts
index 04867ae970..f184bc31e8 100644
--- a/packages/angular-material/src/library/util/deps.ts
+++ b/packages/angular-material/src/library/util/deps.ts
@@ -24,12 +24,6 @@
 */
 /**
  * Compares two dependency arrays by reference, like React's `useMemo` deps.
- *
- * Renderers use this to only recalculate expensive, derived state when one of
- * its inputs actually changed instead of on every emitted state. As with
- * `useMemo`, a given call site is expected to always pass the same dependencies
- * in the same order; the length is compared as well so that a call site which
- * does not can't report "unchanged" for a shortened dependency list.
  */
 export const depsChanged = (
   previous: unknown[] | undefined,
diff --git a/packages/angular-material/src/library/util/detail-uischema.ts b/packages/angular-material/src/library/util/detail-uischema.ts
new file mode 100644
index 0000000000..64c43311fc
--- /dev/null
+++ b/packages/angular-material/src/library/util/detail-uischema.ts
@@ -0,0 +1,81 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import {
+  findUISchema,
+  setReadonly,
+  StatePropsOfControlWithDetail,
+  UISchemaElement,
+} from '@jsonforms/core';
+import cloneDeep from 'lodash/cloneDeep';
+import { depsChanged } from './deps';
+
+/**
+ * Creates a memoized `findUISchema` for renderers rendering a detail.
+ *
+ * `findUISchema` can return the inline `options.detail` or a registered UI
+ * schema, i.e. objects owned by the user, so the result is always a copy, on
+ * which the `readonly` option is set when disabled. It is only recalculated
+ * when one of its inputs changed, so it can be compared by identity.
+ */
+export const createDetailUiSchemaResolver = () => {
+  let deps: unknown[] | undefined;
+  let detailUiSchema: UISchemaElement | undefined;
+  return (
+    props: StatePropsOfControlWithDetail,
+    enabled: boolean,
+    schemaPath: string,
+    fallback?: string | (() => UISchemaElement)
+  ): UISchemaElement => {
+    // `schemaPath` and `fallback` are derived from these as well
+    const nextDeps = [
+      props.uischema,
+      props.uischemas,
+      props.schema,
+      props.rootSchema,
+      props.path,
+      enabled,
+    ];
+    if (!depsChanged(deps, nextDeps)) {
+      return detailUiSchema;
+    }
+    deps = nextDeps;
+
+    detailUiSchema = cloneDeep(
+      findUISchema(
+        props.uischemas,
+        props.schema,
+        schemaPath,
+        props.path,
+        fallback,
+        props.uischema,
+        props.rootSchema
+      )
+    );
+    if (!enabled) {
+      setReadonly(detailUiSchema);
+    }
+    return detailUiSchema;
+  };
+};
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
index ac368187b2..2e7e6a3566 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -413,12 +413,12 @@ describe('Master detail', () => {
     fixture.detectChanges();
 
     expect(ownUischema).toEqual(pristine);
-    expect(component.detailUISchema).not.toBe(ownUischema.options.detail);
-    expect(component.detailUISchema.elements[0].options.readonly).toBe(true);
+    expect(component.detailUiSchema).not.toBe(ownUischema.options.detail);
+    expect(component.detailUiSchema.elements[0].options.readonly).toBe(true);
 
     // the detail is rebuilt from the original, so re-enabling actually restores it
     getJsonFormsService(component).setReadonly(false);
     fixture.detectChanges();
-    expect(component.detailUISchema.elements[0].options?.readonly).toBeFalsy();
+    expect(component.detailUiSchema.elements[0].options?.readonly).toBeFalsy();
   });
 });

From b6504413872d57e6374310a6ee403c05087b0e9a Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Mon, 28 Sep 2026 10:03:34 +0000
Subject: [PATCH 8/9] fix(angular-material): only adjust the generated detail
 of object controls

ObjectControlRenderer set the type of its detail ui schema to VerticalLayout at
the root and its label to the property name otherwise, even for a detail ui
schema the user provided via options.detail or the uischemas registry. Such a
detail is now used as-is and only the generated one is adjusted, as in the React
and Vue object renderers.
---
 MIGRATION.md                                  |  1 +
 .../src/library/other/object.renderer.ts      | 15 ++--
 .../test/object-control.spec.ts               | 76 +++++++++++++++++++
 3 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 49cadb5871..85f19d02ca 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -13,6 +13,7 @@ Consequences:
 
 - Nothing is written into your UI schema anymore. If you relied on reading the `readonly` option, the `type` or the `label` back out of your own object, you need to track that state yourself.
 - The array layout no longer forces the `readonly` option to `false` on the controls of an enabled array's detail. That option takes precedence over both the global config and the JSON schema, so the write suppressed all of them. For controls inside an array's `options.detail`, the following now take effect where they previously did not, in this order of precedence: a `readonly`/`readOnly` option you set yourself, a `readonly`/`readOnly` entry in the global config, and a `readOnly: true` in the corresponding JSON schema. If a field inside an array detail unexpectedly became readonly, one of these is now being honored.
+- The object control no longer overrides the `type` and `label` of a detail UI schema given via `options.detail` or the `uischemas` registry, matching the React and Vue renderers. Only a generated detail is still labeled after the property, or rendered as a `VerticalLayout` at the root. If you relied on the previous label, set `label` in your detail UI schema.
 - The detail UI schema is only recalculated when one of its inputs changes. Modifying your UI schema in place, without replacing the object, is not picked up - as everywhere else in JSON Forms, provide a new UI schema object instead.
 - The array layout renders one item per array entry. Previously, data that was neither an array nor empty - for example an object at a path the schema declares as an array - rendered a single item at a path that does not exist, next to the "No data" message. Such data now renders no items at all. It is still reported as a validation error as before.
 - `ArrayLayoutRenderer` now precalculates the props of its items in `mapAdditionalProps` and exposes them as `itemProps`, which also drives how many items are rendered. `getProps(index)` reads from that array and returns `undefined` for an out of range index instead of synthesizing props. If you subclass the renderer and override `mapAdditionalProps`, call `super.mapAdditionalProps(props)`, otherwise no items are rendered.
diff --git a/packages/angular-material/src/library/other/object.renderer.ts b/packages/angular-material/src/library/other/object.renderer.ts
index 68f754c18a..7fde29a934 100644
--- a/packages/angular-material/src/library/other/object.renderer.ts
+++ b/packages/angular-material/src/library/other/object.renderer.ts
@@ -86,22 +86,23 @@ export class ObjectControlRenderer extends JsonFormsControlWithDetail {
         delete newSchema.oneOf;
         delete newSchema.anyOf;
         delete newSchema.allOf;
-        return Generate.uiSchema(
+        const generated = Generate.uiSchema(
           newSchema,
           'Group',
           undefined,
-          this.rootSchema
+          props.rootSchema
         );
+        if (isEmpty(props.path)) {
+          generated.type = 'VerticalLayout';
+        } else {
+          (generated as GroupLayout).label = startCase(props.path);
+        }
+        return generated;
       }
     );
     if (detailUiSchema === this.detailUiSchema) {
       return;
     }
-    if (isEmpty(props.path)) {
-      detailUiSchema.type = 'VerticalLayout';
-    } else {
-      (detailUiSchema as GroupLayout).label = startCase(props.path);
-    }
     this.detailUiSchema = detailUiSchema;
     this.renderProps = {
       uischema: detailUiSchema,
diff --git a/packages/angular-material/test/object-control.spec.ts b/packages/angular-material/test/object-control.spec.ts
index c6a8f4a808..b3c15e8370 100644
--- a/packages/angular-material/test/object-control.spec.ts
+++ b/packages/angular-material/test/object-control.spec.ts
@@ -250,6 +250,82 @@ describe('Object Control', () => {
     expect(component.detailUiSchema.elements[0].options.readonly).toBe(true);
   });
 
+  it('keeps the label of a given detail ui schema', () => {
+    const uischema = {
+      type: 'Control',
+      scope: '#/properties/foo',
+      options: {
+        detail: {
+          type: 'Group',
+          label: 'Custom',
+          elements: [{ type: 'Control', scope: '#/properties/foo_1' }],
+        },
+      },
+    };
+
+    component.uischema = uischema;
+    component.schema = schema2;
+    getJsonFormsService(component).init({
+      core: {
+        data: {},
+        schema: schema2,
+        uischema: undefined,
+      },
+    });
+    getJsonFormsService(component).registerRenderers(renderers);
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    expect(component.detailUiSchema.label).toBe('Custom');
+  });
+
+  it('keeps the type of a given detail ui schema at the root', () => {
+    const uischema = {
+      type: 'Control',
+      scope: '#',
+      options: {
+        detail: {
+          type: 'Group',
+          label: 'Custom',
+          elements: [{ type: 'Control', scope: '#/properties/foo' }],
+        },
+      },
+    };
+
+    component.uischema = uischema;
+    component.schema = schema1;
+    getJsonFormsService(component).init({
+      core: {
+        data: {},
+        schema: schema1,
+        uischema: undefined,
+      },
+    });
+    getJsonFormsService(component).registerRenderers(renderers);
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    expect(component.detailUiSchema.type).toBe('Group');
+    expect(component.detailUiSchema.label).toBe('Custom');
+  });
+
+  it('renders a generated detail at the root as a vertical layout', () => {
+    component.uischema = uischema1;
+    component.schema = schema1;
+    getJsonFormsService(component).init({
+      core: {
+        data: {},
+        schema: schema1,
+        uischema: undefined,
+      },
+    });
+    getJsonFormsService(component).registerRenderers(renderers);
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    expect(component.detailUiSchema.type).toBe('VerticalLayout');
+  });
+
   it('propagates a changed enabled state to the rendered detail', () => {
     const uischema = {
       type: 'Control',

From 6c5745b980d796d4ad34ca87a8e4723bd2c3eda4 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Mon, 28 Sep 2026 10:03:45 +0000
Subject: [PATCH 9/9] docs: trim angular-material 3.9 migration notes

Reduce the entry to what users need to act on. The bullet about schema
violating non-array data rendering no items is dropped, as it describes a fix
that requires no action.
---
 MIGRATION.md | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 85f19d02ca..07c1fb7b0a 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -4,19 +4,14 @@
 
 ### Angular Material detail renderers no longer modify the given UI schema
 
-The Angular Material array layout, object control and list-with-detail renderers determine the UI schema for their contents via `findUISchema`, which returns the inline `options.detail` UI schema or a UI schema from the `uischemas` registry as-is, i.e. the very object the application passed in.
-These renderers then modified that result in place, i.e. they modified the application's UI schema (see [#2343](https://github.com/eclipsesource/jsonforms/issues/2343)).
-All three set the `readonly` option on it; the object control additionally overwrote the detail's `type` and `label`.
+The Angular Material array layout, object control and list-with-detail renderers modified the detail UI schema given via `options.detail` or the `uischemas` registry in place (see [#2343](https://github.com/eclipsesource/jsonforms/issues/2343)).
 They now work on a copy instead.
 
-Consequences:
-
-- Nothing is written into your UI schema anymore. If you relied on reading the `readonly` option, the `type` or the `label` back out of your own object, you need to track that state yourself.
-- The array layout no longer forces the `readonly` option to `false` on the controls of an enabled array's detail. That option takes precedence over both the global config and the JSON schema, so the write suppressed all of them. For controls inside an array's `options.detail`, the following now take effect where they previously did not, in this order of precedence: a `readonly`/`readOnly` option you set yourself, a `readonly`/`readOnly` entry in the global config, and a `readOnly: true` in the corresponding JSON schema. If a field inside an array detail unexpectedly became readonly, one of these is now being honored.
-- The object control no longer overrides the `type` and `label` of a detail UI schema given via `options.detail` or the `uischemas` registry, matching the React and Vue renderers. Only a generated detail is still labeled after the property, or rendered as a `VerticalLayout` at the root. If you relied on the previous label, set `label` in your detail UI schema.
-- The detail UI schema is only recalculated when one of its inputs changes. Modifying your UI schema in place, without replacing the object, is not picked up - as everywhere else in JSON Forms, provide a new UI schema object instead.
-- The array layout renders one item per array entry. Previously, data that was neither an array nor empty - for example an object at a path the schema declares as an array - rendered a single item at a path that does not exist, next to the "No data" message. Such data now renders no items at all. It is still reported as a validation error as before.
-- `ArrayLayoutRenderer` now precalculates the props of its items in `mapAdditionalProps` and exposes them as `itemProps`, which also drives how many items are rendered. `getProps(index)` reads from that array and returns `undefined` for an out of range index instead of synthesizing props. If you subclass the renderer and override `mapAdditionalProps`, call `super.mapAdditionalProps(props)`, otherwise no items are rendered.
+- Nothing is written into your UI schema anymore, e.g. the `readonly` option. If you read such state back out of your own object, track it yourself.
+- The array layout no longer forces the `readonly` option to `false` on the controls of its detail. A `readonly`/`readOnly` option, a `readonly`/`readOnly` config entry and a `readOnly: true` in the JSON schema now take effect for controls inside an array's `options.detail`, so such a field may now be readonly where it previously was not.
+- The object control no longer overrides the `type` and `label` of a detail UI schema given via `options.detail` or the `uischemas` registry. If you relied on the previous label, set `label` in your detail UI schema.
+- In-place modifications of your UI schema are not picked up anymore. Provide a new UI schema object instead.
+- If you subclass `ArrayLayoutRenderer` and override `mapAdditionalProps`, call `super.mapAdditionalProps(props)`. The item props are precalculated there and exposed as `itemProps`; `getProps(index)` returns `undefined` for an out of range index.
 
 ### Data update paths treat all segments literally