hamzahamidi/ajsf

Recursive Arrays add new item bug

neil-coutinho opened this issue · 0 comments

Describe the bug
which template:

  • MaterialDesignFrameworkModule — Material Design
  • Bootstrap3FrameworkModule — Bootstrap 3
  • Bootstrap4FrameworkModule — Bootstrap 4
  • NoFrameworkModule — plain HTML
  • Other (please specify below)

Add new item i.e. AddRefComponent adds recursive child element to parent array.

To Reproduce
Steps to reproduce the behavior:

  1. Upload the following recursive schema and layout into the playground at https://hamidihamza.com/ajsf/
  2. Click Add button for the parent array
  3. The nested child array (recursive) item is added to the parent

Expected behavior
A clear and concise description of what you expected to happen.

Add item should insert a new item to the correct array list

Screenshots

Screenshot 2021-03-30 at 9 37 25 AM

Additional context

Sample Schema + Layout

    "schema": {
        "properties": {
            "modules": {
                "type": "object",
                "title": "Modules",
                "properties": {
                    "nutrition": {
                        "type": "object",
                        "title": "Nutrition",
                        "properties": {
                            "ingredients": {
                                "type": "array",
                                "title": "Ingredients",
                                "items": {
                                    "$ref": "#/definitions/ingredients"
                                }
                            }
                        }
                    }
                }
            }
        },
        "definitions": {
            "ingredients": {
                "type": "object",
                "properties": {
                    "name": {
                        "title": "Name",
                        "type": "string"
                    },
                    "subingredients": {
                        "title": "Sub Ingredients",
                        "type": "array",
                        "maxItems": 1,
                        "items": {
                            "$ref": "#/definitions/ingredients"
                        },
                        "default": []
                    }
                }
            }
        }
    },
    "layout": [
        {
            "type": "div",
            "key": "modules",
            "items": [
                {
                    "type": "section",
                    "title": "Nutrition",
                    "key": "modules.nutrition",
                    "items": [
                        {
                            "type": "array",
                            "key": "modules.nutrition.ingredients",
                            "items": [
                                {
                                    "type": "section",
                                    "title": "Ingredients",
                                    "items": [
                                        {
                                            "type": "text",
                                            "title": "Name",
                                            "key": "modules.nutrition.ingredients[].name"
                                        },
                                        {
                                            "type": "array",
                                            "key": "modules.nutrition.ingredients[].subingredients",
                                            "items": [
                                                {
                                                    "type": "section",
                                                    "title": "Sub Ingredients",
                                                    "items": [
                                                        {
                                                            "type": "text",
                                                            "title": "Name",
                                                            "key": "modules.nutrition.ingredients[].subingredients[].name"
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}```

@hamzahamidi  this seems to be related with the buildLayout function when recursive $refs are involved.