Conditional rendering is not working for accordion tabs

[adityapatil9191]

Scope: <DESCRIBE SCOPE OF THIS ISSUE, i.e.: PF4 mapper, Form renderer>
https://codesandbox.io/p/sandbox/react-data-driven-autocomplete-forked-t8x4m5?file=%2Fsrc%2Fcomponents%2Fschema.js%3A114%2C11
Description

The tab component should be visible only if form component values present in another section match a certain condition. However that is not working. Please find the schema below for your reference.

Schema

const schema = {
fields: [
{
component: "tabs",
name: "tabs",
fields: [
{
name: "A",
title: "TAB 1",
component: "tabs",
fields: [
{
component: "autocomplete",
name: "a.pr",
label: "a.pr",
initialValue: {
value: "A",
label: "A",
},
options: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
},
{
component: "autocomplete",
name: "in.cp",
label: "in.cp",
initialValue: {
value: "A",
label: "A",
},
options: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
clearOnUnmount: true,
},
],
},
{
name: "B",
title: "TAB 2",
component: "tabs",
fields: [
{
component: "autocomplete",
name: "a.pr2",
label: "a.pr2",
initialValue: {
value: "A",
label: "A",
},
options: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
},
{
component: "autocomplete",
name: "in.cp2",
label: "in.cp2",
initialValue: {
value: "A",
label: "A",
},
options: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
clearOnUnmount: true,
},
],
},
{
name: "C",
title: "TAB 3",
component: "tabs",
fields: [
{
component: "autocomplete",
name: "a.pr3",
label: "a.pr3",
initialValue: {
value: "A",
label: "A",
},
options: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
},
{
component: "autocomplete",
name: "in.cp3",
label: "in.cp3",
initialValue: {
value: "A",
label: "A",
},
options: [
{
value: "A",
label: "A",
},
{
value: "B",
label: "B",
},
{
value: "C",
label: "C",
},
],
clearOnUnmount: true,
},
{
component: "fieldArray",
name: "a.sa",
fieldKey: "field_array",
title: "fieldArray-1",
fields: [
{
component: "textField",
name: "key",
label: "Annotation Name",
},
{
component: "textField",
name: "value",
label: "Annotation Value",
},
],
condition: {
sequence: [
{
and: [
{
when: "a.pr.value",
is: "B",
notMatch: true,
},
{ when: "in.cp3.value", is: "B" },
],
then: {
set: {
"a.pr3": { value: "C", label: "C" },
"a.sa": [
{
key: "type",
value: "nlb",
},
],
},
},
else: { visible: true },
},
],
},
},
{
component: "textField",
name: "in.cp4",
initialValue: "initial",
clearOnUnmount: true,
hideField: false,
condition: {
when: "in.cp3.value",
is: "B",
then: { set: { "in.cp4": "set" } },
},
},
],
condition: { when: "a.pr", is: "A", then: { visible: true } },
},
],
},
],
};

export default schema;

[adityapatil9191]

Please help / respond

[rvsia]

Hey, if I understand your issue correctly, then I think the issue is here:

When you render tab components, there is actually no data driven from component (so no condition is calculated), but you render directly children of the component. You can wrap this section to a new component in the mapper and then just do formOptions.renderForm(fields)

[adityapatil9191]

@rvsia could you please help me with the code example?

[adityapatil9191]

@rvsia Please find the new sandbox for reference. https://codesandbox.io/p/sandbox/react-data-driven-autocomplete-forked-t8x4m5?file=%2Fsrc%2Fcomponents%2Fschema.js

[rvsia]

I am getting "Sandbox not found". :-/

[adityapatil9191]

Apologies for the inconvenience caused. I have updated the permissions now. 1

[rvsia]

@adityapatil9191 Here is fixed version [1]

1. you mapped children of tabs to tabs, I created a new tab so it's wrapped as a new field.
2. your autocomplete component is wrong - you store a whole object there, but you need to store data.value

onChange={(_, data) => input.onChange(data.value)}

[adityapatil9191]

@rvsia thanks man it works !!! I knew I was missing something.

[adityapatil9191]

@rvsia in this example, how can I handle the functionality of keeping only one accordion open at a time. I tried passing index as a property to the accordion tab component but that did not work.

[rvsia]

Hey, you need to write your own component to do that as usual in React.

Example:

Accordion = ({ fields }) => {
   const [selected, setSelected] = useState()

    return fields.map(tab => 
                <Tab isOpen={selected === tab.name} onSelected={() => setSelected(tab.name)} }>
                        {renderForm(tab.fields)}
                 </Tab>
   )
}

[adityapatil9191]

@rvsia thanks that is precisely what I am trying . Have been trying to resolve the problem for quite sometime https://codesandbox.io/p/sandbox/react-data-driven-autocomplete-forked-wssh35 . I have updated the accordion MUI component based on the open close logic and state management. This was working fine before. I am not sure if this has got to anything with the tab component though. Please find the reference sandbox url.

[adityapatil9191]

Hello Richard, I have added a comment here. Could you please look into it and help me ? Thanks, Aditya

…

On Fri, May 10, 2024 at 6:55 PM Richard Všianský ***@***.***> wrote: @adityapatil9191 <https://github.com/adityapatil9191> Here is fixed version: 1. you mapped children of tabs to tabs, I created a new tab so it's wrapped as a new field. 2. your autocomplete component is wrong - you store a whole object there, but you need to store data.value onChange={(_, data) => input.onChange(data.value)} — Reply to this email directly, view it on GitHub <#1459 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIA7R5WC6HAUCKYEBB4JU6DZBTDD3AVCNFSM6AAAAABHQTACR2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGOBTGA3DC> . You are receiving this because you were mentioned.Message ID: <data-driven-forms/react-forms/repo-discussions/1459/comments/9383061@ github.com>