Error in case of using nested objects in uiSchema

[rsmtnn]

Hello. I`am trying to use schemas like this:

jsonschema: {
                type: "object",
                properties: {
                    field1: {
                        type: "object",
                        properties: {
                            nestedField1: {
                                title: "schema id",
                                type: "string"
                            },
                            nestedField2: {
                                type: "object",
                                properties: {
                                    twiceNestedField: {
                                        type: "string"
                                    }
                                }
                            }
                        }
                    },
                    field2: {
                        type: "string"
                    }
                }
            },
uiSchema: {
                field1: {
                    nestedField1: {
                        "nav": "Tab1"
                    },
                    nestedField2: {
                        twiceNestedField: {
                            "nav": "Tab1"
                        }
                    }
                },
                field2: {
                    "nav": "Tab2"
                }
            }

And got the error:

extractSubUiSchema.js:19 Uncaught TypeError: Cannot read property 'ui:widget' of undefined
    at restoreField (extractSubUiSchema.js:19)
    at eval (extractSubUiSchema.js:31)
    at Array.forEach (<anonymous>)
    at restoreFields (extractSubUiSchema.js:30)
    at extractSubUiSchema (extractSubUiSchema.js:47)
    at NavTree.buildUiSchema (NavTree.js:66)
    at NavTree.buildUiSchema (NavTree.js:81)
    at NavTree.toSubForms (NavTree.js:86)
    at FormWithPagination.render (applyNav.js:124)
    at finishClassComponent (react-dom.development.js:14301)

Also it could be a good idea to allow to define "nav" for object field and render all contained properties as like they are inherit "nav" from parent object field?

[polinaswca]

Same here. Complex nested forms throw this error.

[neilyoung]

See also https://github.com/RxNT/react-jsonschema-form-pagination/issues/46 I think I was invited to make a PR. Dropped it...

[nitishdhar]

anyone know any workaround for this? I am trying to apply tabs to something like this -

{
 "fieldGroup1": {
     "field1": ....,
      "field2":....
  },
   "fieldGroup2": {
       "field1": ....,
        "field2"......
    }
}

I need fieldGroup1 and fieldGroup2 to be the two tabs. The following does not work

"fieldGroup1": {
     "nav": "Tab 1"
  },
  "fieldGroup2": {
       "nav": "Tab2"
    }

[giuvincenzi]

Same problem if you use ui:field in nested structure.

// Nested NOT work
const uiSchema = {
    first: {
        nested: {
            'ui:field': 'MyCustomField'
        }
    }
}
const schema = {
    first: {
        type: 'object',
        properties: {
            nested: {
                type: 'object',
                properties: {
                    pros1: {
                        type: 'number'
                    },
                    props2: {
                        type: 'number'
                    }
                }
            },
        }
    }
}

// Not nested work
const uiSchema = {
    first: {
        'ui:field': 'MyCustomField'
    }
}
const schema = {
    first: {
        type: 'object',
        properties: {
            pros1: {
                type: 'number'
            },
            props2: {
                type: 'number'
            }
        }
    }
}

any updates?

[marbetschar]

kind of the same issue over here. I'm trying to display two objects in two tabs. But the tab navigation is rendered at the wrong place:

The navigation is rendered below the input title, which is obviously not the expected result. The navigation should be place below the form title "My Form!".

Is there any workaround for this?

FWIW: If I remove "nav": "..." for "input1" and "input2", no tab-navigation is rendered at all.

This how the wrong output looks like (code below):

export const schema = {
  "type": "object",
  "properties": {
    
    "thing1": {
      "type": "object",
      "properties": {
        "input1": { "type": "string" }
      }
    },

  "thing2": {
      "type": "object",
      "properties": {
        "input2": { "type": "string" }
      }
    }
  }
};

export const uiSchema = {
  "ui:title": "My Form!",

  "thing1": {
    "nav": "main",
    "ui:title": "Thing 1 Title",
    "input1": {
      "nav": "main"
    }
  },

  "thing2": {
    "nav": "other",
    "ui:title": "Thing 2 Title",
    "input2": {
      "nav": "other"
    }
  }
};

[GOVYANSONG]

I encountered the exact same issue recently. I inspected the code and located the logic in func extractTree within file extractTree.js. workaround is to set ui:order in uiSchema at initial rendering and onNavChange handler. I use a map to store nav name and the array of fields for ui:order. something like this (note: you need the star for rest of fields at the end of the array):

const initNav = "main";

const uiNavOrderMap = { main: ["firstName", "lastName", "age", "noise.address", ""], other: ["firsNameAlias", "phone", "nickname", "noise.email", ""] };

setUiOrder = (activeNav) => { uiSchema["ui:order"] = uiNavOrderMap[activeNav]; };

<FormWithNavs schema={schema} uiSchema={uiSchema}

    onNavChange={(active, old) => {
      console.log(`${active}, ${old}`);
      this.setUiOrder(active);
    }}
  >