data-driven-forms
Carbon Mapper Subform/Tabs Component Bug
Possible bug found with the carbon mapper subform and tab components. The tabs component and subform component seem to work correctly for the pf mapper as seen here: https://data-driven-forms.org/provided-mappers/tabs?mapper=pf4 but for the carbon mapper the subform seems to be acting as the tabs component and the tabs component doesn't seem to do anything. For example I have a schema:
{
component: componentTypes.SUB_FORM,
id: 'test',
name: 'subform-1',
label: 'test',
fields: ...
}
{
component: componentTypes.SUB_FORM,
id: 'test',
name: 'subform-2',
label: 'test',
fields: ...
}
When used on their own there is no visible label or anything printed in the form to show the subform. But when I take these components and make them fields in a tab component like this:
{
component: componentTypes.TABS,
id: 'name-wrapper',
name: 'tabs',
label: 'tab',
fields: [
{
component: componentTypes.SUB_FORM,
id: 'test',
name: 'subform-1',
label: 'test',
fields: ...
}
{
component: componentTypes.SUB_FORM,
id: 'test',
name: 'subform-2',
label: 'test',
fields: ...
}
]}
Then the result is the subforms act as tabs and the tab component does not do anything.
This image is the result of using the subforms in the Tabs component. It is essentially using the subforms as tabs and doing nothing with the tab component.
@GilbertCherrie I think this is not bug, but the schema is not correct. You can take a look at this example: https://codesandbox.io/s/smoosh-firefly-4uwjx3?file=/src/App.js
It uses the exact same schema as the PF4 example.
This image is the result of using the subforms in the Tabs component. It is essentially using the subforms as tabs and doing nothing with the tab component.
based on the schema sample you provided, you are not defining the tab items, but you use the subform immediately instead. The first level of fields of a tab component is a definition of the tab.
const schema = {
fields: [
{
component: "tabs", // <- main tab schema
name: "tabs",
validateFields: ["apple"],
fields: [
{
name: "1", // <- tab item
title: "Fruits",
description: "Here you can find fruits",
fields: [
{
name: "sub-1", // <- fields in tab (subform)
component: "sub-form",
title: "A sub form component",
fields: [
{
name: "apple", // <- sub form fields
label: "Apple",
title: "Apple",
component: "text-field",
validate: [
{
type: "required"
}
]
}
]
}
]
},
// other tabs
]
}
]
};
Let me know if it is what you are looking for.
