Skip to content

Nested fields losing focus - Angular #1612

@eebsie

Description

@eebsie

Describe the bug
I'm managing to render a form which has nested properties using the default layout with the Angular renderer, which is good. However the text fields for the nested properties lose focus after each character is typed in to them. So to type further characters you have to click back on the text field after each character, which is obviously not ideal. For non-nested properties this is not an issue.

To Reproduce
Using https://github.com/eclipsesource/jsonforms-angular-seed as a starting point and having done the setup for that, change schema.json to be:

{
    "type": "object",
    "properties": {
        "target": {
            "type": "object",
            "properties": {
                "ip": {
                    "type": "string",
                    "format": "ipv4",
                    "title": "IP"
                }
            },
            "title": "Host",
            "required": [
                "ip"
            ]
        }
    },
    "required": [
        "host"
    ],
    "title": "Test Page"
}

In data.ts, change the data to:

export default {
    host: {
        ip: "192.168.56.1"
    }
};

In app.module.ts change the call to jsonformsService.updateCore to use generateDefaultUISchema:

jsonformsService.updateCore(
    Actions.init(
        data,
        res.resolved,
        generateDefaultUISchema(res.resolved),
        ajv as any
    )
);

Expected behavior
To not have the losing focus issue describe above, i.e. to function as well as non-nested properties.

Browser (please complete the following information):
Chrome 79

Used Setup (please complete the following information):

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions