useParentField() hook doesn't calculated parents correctly

[ma-schmidt-de]

Version

v5.40.0-beta.4

Operating System

MacOS

Browser

Firefox 126.0.1

What are the steps to reproduce this bug?

1. Register a Content Model Product
E.g., use the following code to implement a content model that has an attribute field isoCode nested within three different objects. It's field path would be metaData.generalMetaData.specificMetaData.isoCode.

product.ts

import { CmsGroupPlugin, CmsModelPlugin } from "@webiny/api-headless-cms";

export default [
    // Defines a new "E-Commerce" content models group.
    new CmsGroupPlugin({
        id: "ecommerce",
        name: "E-Commerce",
        description: "E-Commerce content model group",
        slug: "e-commerce",
        icon: "fas/shopping-cart"
    }),

    // Defines a new "Product" content model.
    new CmsModelPlugin({
        name: "Product",
        modelId: "product",
        description: "Product content model",
        group: {
            id: "ecommerce",
            name: "E-Commerce"
        },
        fields: [
            {
                id: "productName",
                fieldId: "productName",
                type: "text",
                label: "Product Name",
                helpText: "A short product name",
                renderer: { name: "text-input" },
                validation: [
                    {
                        name: "required",
                        message: "Value is required."
                    }
                ]
            },

            {
                type: "object",
                renderer: {
                    name: "object-accordion"
                },
                label: "Meta Data",
                fieldId: "metaData",
                id: "metaData",
                settings: {
                    fields: [
                        {
                            type: "object",
                            renderer: {
                                name: "object-accordion"
                            },
                            label: "General Data",
                            fieldId: "generalMetaData",
                            id: "generalMetaData",
                            settings: {
                                fields: [
                                    {
                                        type: "object",
                                        renderer: {
                                            name: "object-accordion"
                                        },
                                        label: "Specific Data",
                                        fieldId: "specificMetaData",
                                        id: "specificMetaData",
                                        settings: {
                                            fields: [
                                                {
                                                    id: "isoCode",
                                                    fieldId: "isoCode",
                                                    type: "number",
                                                    label: "ISO Code",
                                                    renderer: { name: "text-input" }
                                                }
                                            ],
                                            layout: [["isoCode"]]
                                        }
                                    }
                                ],
                                layout: [["specificMetaData"]]
                            }
                        }
                    ],
                    layout: [["generalMetaData"]]
                }
            }
        ],
        layout: [
            ["productName"],
            ["metaData"]
        ],
        titleFieldId: "productName"
    })
];

2. Register a field decorator for Product
Here is an example decorator that calls the useParentField() hook multiple times to fetch all ancestor fields and logs them to console. This decorator is registered through the Apps.tsx for modelId product.

ProductRenderDecorator.tsx

import React from "react";
import { ContentEntryEditorConfig, useParentField } from "@webiny/app-headless-cms";

const { FieldElement } = ContentEntryEditorConfig;

export const ProductRenderDecorator = FieldElement.createDecorator(Original => {
    return function ConditionalRender(props) {

        if (props.field.fieldId == "isoCode") {
            const parent = useParentField();
            const parent2 = useParentField(1);
            const parent3 = useParentField(2);

            console.log(`current field is ${parent?.path}.${props.field.fieldId}`);
            console.log(`1st level parent: ${parent?.field.fieldId}`);
            console.log(`2nd level parent: ${parent2?.field.fieldId}`);
            console.log(`3rd level parent: ${parent3?.field.fieldId}`);
            console.log("-1-");
        }

        return <Original {...props} />;
    };
});

What is the expected behavior?

The following console log is expected when loading a product content entry:

current field is metaData.generalMetaData.specificMetaData.isoCode
1st level parent: specificMetaData
2nd level parent: generalMetaData
3rd level parent: metaData
-1-

What do you see instead?

The following console log:

current field is metaData.generalMetaData.specificMetaData.isoCode
1st level parent: specificMetaData
2nd level parent: metaData
3rd level parent: undefined
-1-

Additional information

No response

Possible solution

This needs a fix in line no. 33 of ParentValue.tsx.
I'll provide a PR. 👍