From 234e1608c0ca16dc640c4f371fb07b677ca6976f Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Tue, 1 Sep 2026 11:11:33 +0200
Subject: [PATCH] Fix ObjectContentEditor navigation into objects nested in
 arrays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigating into a property of an object that sits inside an array
resolved the value through its parent, and the parent was the array
itself. That lookup could not succeed, so the editor silently fell back
to rendering the root object while the navigational bar still showed the
deeper path — the breadcrumb and the table disagreed with no sign that
anything had gone wrong.

Navigation paths now address array elements by their index, so a path
resolves in a single traversal, a later element navigates to its own
content rather than the first one's, and the breadcrumb shows the index
it walked through. An unresolvable path returns to the root instead of
rendering the wrong data under it.
---
 .../ObjectContentEditor.tsx                   |  56 +++++-----
 ...igating_into_an_object_within_an_array.tsx | 105 ++++++++++++++++++
 ...en_addressing_an_array_by_property_name.ts |  18 +++
 .../when_array_index_is_out_of_range.ts       |  18 +++
 .../when_path_traverses_an_array.ts           |  18 +++
 Source/ObjectContentEditor/objectHelpers.ts   |  12 +-
 .../breadcrumbHelpers.ts                      |  16 ++-
 ...when_navigation_path_has_an_array_index.ts |  21 ++++
 8 files changed, 232 insertions(+), 32 deletions(-)
 create mode 100644 Source/ObjectContentEditor/for_ObjectContentEditor/when_navigating_into_an_object_within_an_array.tsx
 create mode 100644 Source/ObjectContentEditor/for_getValueAtPath/when_addressing_an_array_by_property_name.ts
 create mode 100644 Source/ObjectContentEditor/for_getValueAtPath/when_array_index_is_out_of_range.ts
 create mode 100644 Source/ObjectContentEditor/for_getValueAtPath/when_path_traverses_an_array.ts
 create mode 100644 Source/ObjectNavigationalBar/for_buildNavigationBreadcrumbs/when_navigation_path_has_an_array_index.ts

diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 93985683..59b1cbff 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -162,9 +162,9 @@ export const ObjectContentEditor = ({
         }
     }, [validationErrors, editMode, onValidationChange]);
 
-    const navigateToProperty = useCallback(
-        (key: string) => {
-            setNavigationPath([...navigationPath, key]);
+    const navigateTo = useCallback(
+        (segments: string[]) => {
+            setNavigationPath([...navigationPath, ...segments]);
         },
         [navigationPath],
     );
@@ -185,28 +185,15 @@ export const ObjectContentEditor = ({
             return object;
         }
 
-        const lastKey = navigationPath[navigationPath.length - 1];
-        const pathToParent = navigationPath.slice(0, -1);
+        const value = getValueAtPath(object, navigationPath);
+        return value !== null && typeof value === 'object' ? value : null;
+    }, [object, navigationPath]);
 
-        const parentValue =
-            pathToParent.length > 0 ? getValueAtPath(object, pathToParent) : object;
-
-        if (
-            parentValue &&
-            typeof parentValue === 'object' &&
-            !Array.isArray(parentValue)
-        ) {
-            const value = (parentValue as { [k: string]: Json })[lastKey];
-
-            if (Array.isArray(value)) {
-                return value;
-            } else if (value && typeof value === 'object') {
-                return value;
-            }
+    useEffect(() => {
+        if (navigationPath.length > 0 && currentData === null) {
+            setNavigationPath([]);
         }
-
-        return object;
-    }, [object, navigationPath, getValueAtPath]);
+    }, [currentData, navigationPath]);
 
     const currentProperties = useMemo(() => {
         const properties = schema.properties || {};
@@ -447,7 +434,11 @@ export const ObjectContentEditor = ({
         );
     };
 
-    const renderValue = (value: Json, propertyName: string) => {
+    const renderValue = (
+        value: Json,
+        propertyName: string,
+        pathSegments: string[],
+    ) => {
         if (value === null || value === undefined) return '';
 
         if (Array.isArray(value)) {
@@ -455,7 +446,7 @@ export const ObjectContentEditor = ({
                 <button
                     type='button'
                     className='cratis:flex cratis:items-center cratis:gap-2 cratis:cursor-pointer'
-                    onClick={() => navigateToProperty(propertyName)}
+                    onClick={() => navigateTo(pathSegments)}
                     style={{
                         color: 'var(--cratis-primary-color)',
                         display: 'flex',
@@ -481,7 +472,7 @@ export const ObjectContentEditor = ({
                 <button
                     type='button'
                     className='cratis:flex cratis:items-center cratis:gap-2 cratis:cursor-pointer'
-                    onClick={() => navigateToProperty(propertyName)}
+                    onClick={() => navigateTo(pathSegments)}
                     style={{
                         color: 'var(--cratis-primary-color)',
                         display: 'flex',
@@ -506,6 +497,10 @@ export const ObjectContentEditor = ({
     };
 
     const renderTable = () => {
+        if (currentData === null) {
+            return null;
+        }
+
         if (Array.isArray(currentData)) {
             if (currentData.length === 0)
                 return (
@@ -549,6 +544,7 @@ export const ObjectContentEditor = ({
                                                 {renderValue(
                                                     (item as Record<string, Json>)[key],
                                                     key,
+                                                    [String(index), key],
                                                 )}
                                             </td>
                                         </tr>
@@ -566,7 +562,9 @@ export const ObjectContentEditor = ({
                                 <tr key={index} style={rowStyle}>
                                     <td style={labelStyle}>[{index}]</td>
                                     <td style={valueStyle}>
-                                        {renderValue(item, `[${index}]`)}
+                                        {renderValue(item, `[${index}]`, [
+                                            String(index),
+                                        ])}
                                     </td>
                                 </tr>
                             ))}
@@ -647,7 +645,9 @@ export const ObjectContentEditor = ({
                                                   property,
                                                   value,
                                               )
-                                            : renderValue(value as Json, propertyName)}
+                                            : renderValue(value as Json, propertyName, [
+                                                  propertyName,
+                                              ])}
                                     </td>
                                 </tr>
                             );
diff --git a/Source/ObjectContentEditor/for_ObjectContentEditor/when_navigating_into_an_object_within_an_array.tsx b/Source/ObjectContentEditor/for_ObjectContentEditor/when_navigating_into_an_object_within_an_array.tsx
new file mode 100644
index 00000000..8b7a0d3e
--- /dev/null
+++ b/Source/ObjectContentEditor/for_ObjectContentEditor/when_navigating_into_an_object_within_an_array.tsx
@@ -0,0 +1,105 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { ObjectContentEditor } from '../ObjectContentEditor';
+import type { Json } from '../../types/JsonSchema';
+
+const object: Json = {
+    eventType: 'PurchaseOrderRaised',
+    causation: [
+        {
+            type: 'Command',
+            properties: { commandType: 'RaisePurchaseOrder' },
+        },
+        {
+            type: 'Reactor',
+            properties: { reactorType: 'PurchaseOrderReactor' },
+        },
+    ],
+};
+
+const schema = {
+    type: 'object' as const,
+    properties: {
+        eventType: { type: 'string' as const },
+        causation: {
+            type: 'array' as const,
+            items: {
+                type: 'object' as const,
+                properties: {
+                    type: { type: 'string' as const },
+                    properties: { type: 'object' as const },
+                },
+            },
+        },
+    },
+};
+
+describe('when navigating into an object within an array', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const click = async (selector: string) => {
+        const element = container.querySelector<HTMLButtonElement>(selector);
+        if (!element) throw new Error(`Nothing matched '${selector}'.`);
+        await act(async () => element.click());
+    };
+
+    const labels = () =>
+        Array.from(container.querySelectorAll('tbody tr td:first-child')).map(
+            (cell) => cell.textContent,
+        );
+
+    const breadcrumb = () =>
+        container.querySelector('.cratis-object-navigational-bar')?.textContent ?? '';
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(<ObjectContentEditor object={object} schema={schema} />);
+        });
+        await click('button[aria-label="Open causation, 2 items"]');
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should show the nested object of the element that was navigated into', async () => {
+        await click('button[aria-label="Open properties"]');
+        expect(labels()).to.deep.equal(['commandType']);
+    });
+
+    it('should show the nested object of a later element', async () => {
+        const buttons = Array.from(
+            container.querySelectorAll<HTMLButtonElement>(
+                'button[aria-label="Open properties"]',
+            ),
+        );
+        await act(async () => buttons[1].click());
+        expect(labels()).to.deep.equal(['reactorType']);
+    });
+
+    it('should include the array index in the breadcrumb', async () => {
+        await click('button[aria-label="Open properties"]');
+        expect(breadcrumb()).to.contain('causation').and.to.contain('[0]').and.to.contain('properties');
+    });
+
+    it('should navigate back out to the array element', async () => {
+        await click('button[aria-label="Open properties"]');
+        await click('button[aria-label="Navigate back"]');
+        expect(labels()).to.deep.equal(['type', 'properties']);
+    });
+});
diff --git a/Source/ObjectContentEditor/for_getValueAtPath/when_addressing_an_array_by_property_name.ts b/Source/ObjectContentEditor/for_getValueAtPath/when_addressing_an_array_by_property_name.ts
new file mode 100644
index 00000000..a3df66ab
--- /dev/null
+++ b/Source/ObjectContentEditor/for_getValueAtPath/when_addressing_an_array_by_property_name.ts
@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { getValueAtPath } from '../objectHelpers';
+import type { Json } from '../../types/JsonSchema';
+
+describe('when addressing an array by property name rather than index', () => {
+    const data: Json = { causation: [{ properties: { eventType: 'Raised' } }] };
+    let result: Json | null;
+
+    beforeEach(() => {
+        result = getValueAtPath(data, ['causation', 'properties']);
+    });
+
+    it('should return null rather than falling back to another value', () => {
+        (result === null).should.be.true;
+    });
+});
diff --git a/Source/ObjectContentEditor/for_getValueAtPath/when_array_index_is_out_of_range.ts b/Source/ObjectContentEditor/for_getValueAtPath/when_array_index_is_out_of_range.ts
new file mode 100644
index 00000000..f6c07551
--- /dev/null
+++ b/Source/ObjectContentEditor/for_getValueAtPath/when_array_index_is_out_of_range.ts
@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { getValueAtPath } from '../objectHelpers';
+import type { Json } from '../../types/JsonSchema';
+
+describe('when getting a value at an array index that is out of range', () => {
+    const data: Json = { causation: [{ type: 'Command' }] };
+    let result: Json | null;
+
+    beforeEach(() => {
+        result = getValueAtPath(data, ['causation', '1']);
+    });
+
+    it('should return null', () => {
+        (result === null).should.be.true;
+    });
+});
diff --git a/Source/ObjectContentEditor/for_getValueAtPath/when_path_traverses_an_array.ts b/Source/ObjectContentEditor/for_getValueAtPath/when_path_traverses_an_array.ts
new file mode 100644
index 00000000..aa51373d
--- /dev/null
+++ b/Source/ObjectContentEditor/for_getValueAtPath/when_path_traverses_an_array.ts
@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { getValueAtPath } from '../objectHelpers';
+import type { Json } from '../../types/JsonSchema';
+
+describe('when getting a value inside an array element', () => {
+    const data: Json = { causation: [{ properties: { eventType: 'Raised' } }] };
+    let result: Json | null;
+
+    beforeEach(() => {
+        result = getValueAtPath(data, ['causation', '0', 'properties', 'eventType']);
+    });
+
+    it('should return the value reached through the array index', () => {
+        result.should.equal('Raised');
+    });
+});
diff --git a/Source/ObjectContentEditor/objectHelpers.ts b/Source/ObjectContentEditor/objectHelpers.ts
index 7f2048b5..087b4bec 100644
--- a/Source/ObjectContentEditor/objectHelpers.ts
+++ b/Source/ObjectContentEditor/objectHelpers.ts
@@ -1,21 +1,29 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { isArrayIndexSegment } from '../ObjectNavigationalBar/breadcrumbHelpers';
 import { Json } from '../types/JsonSchema';
 
 /**
  * Retrieves the value at the specified path within a JSON data structure.
+ * Object properties are addressed by name and array elements by their
+ * zero-based index (e.g. `['causation', '0', 'properties']`).
  * Returns null if the path cannot be followed.
  */
 export function getValueAtPath(data: Json, path: string[]): Json | null {
     let current: Json = data;
     for (const segment of path) {
         if (current === null || current === undefined) return null;
-        if (typeof current === 'object' && !Array.isArray(current) && current !== null) {
+        if (Array.isArray(current)) {
+            if (!isArrayIndexSegment(segment)) return null;
+            const index = Number(segment);
+            if (index >= current.length) return null;
+            current = current[index];
+        } else if (typeof current === 'object') {
             current = (current as { [key: string]: Json })[segment];
         } else {
             return null;
         }
     }
-    return current;
+    return current ?? null;
 }
diff --git a/Source/ObjectNavigationalBar/breadcrumbHelpers.ts b/Source/ObjectNavigationalBar/breadcrumbHelpers.ts
index 1356f719..599c19de 100644
--- a/Source/ObjectNavigationalBar/breadcrumbHelpers.ts
+++ b/Source/ObjectNavigationalBar/breadcrumbHelpers.ts
@@ -1,15 +1,27 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+/**
+ * Determines whether a navigation path segment addresses an element in an array
+ * rather than a property on an object. Array elements are addressed by their
+ * zero-based index, written as a plain decimal string (e.g. `'0'`).
+ */
+export function isArrayIndexSegment(segment: string): boolean {
+    return /^\d+$/.test(segment);
+}
+
 /**
  * Builds the breadcrumb items for an object navigation bar from a navigation path.
- * Always starts with a 'Root' item at index 0.
+ * Always starts with a 'Root' item at index 0. Array index segments are rendered
+ * in bracket notation (`'0'` becomes `'[0]'`) so they read as elements rather than
+ * as properties.
  */
 export function buildNavigationBreadcrumbs(navigationPath: string[]): { name: string; index: number }[] {
     const items: { name: string; index: number }[] = [{ name: 'Root', index: 0 }];
     for (let i = 0; i < navigationPath.length; i++) {
+        const segment = navigationPath[i];
         items.push({
-            name: navigationPath[i],
+            name: isArrayIndexSegment(segment) ? `[${segment}]` : segment,
             index: i + 1,
         });
     }
diff --git a/Source/ObjectNavigationalBar/for_buildNavigationBreadcrumbs/when_navigation_path_has_an_array_index.ts b/Source/ObjectNavigationalBar/for_buildNavigationBreadcrumbs/when_navigation_path_has_an_array_index.ts
new file mode 100644
index 00000000..da328509
--- /dev/null
+++ b/Source/ObjectNavigationalBar/for_buildNavigationBreadcrumbs/when_navigation_path_has_an_array_index.ts
@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { buildNavigationBreadcrumbs } from '../breadcrumbHelpers';
+
+describe('when building breadcrumbs with an array index in the navigation path', () => {
+    let result: { name: string; index: number }[];
+
+    beforeEach(() => {
+        result = buildNavigationBreadcrumbs(['causation', '0', 'properties']);
+    });
+
+    it('should render the index segment in bracket notation', () => {
+        result[2].name.should.equal('[0]');
+    });
+
+    it('should leave property segments unchanged', () => {
+        result[1].name.should.equal('causation');
+        result[3].name.should.equal('properties');
+    });
+});