Groups create header add-on randomly - Front End code seems to get corrupted

When I use groups to arrange a number of items i find that sometimes the group will randomly add a header and place the components that were supposed to be inside the group in the new header add-in for that group. This happens specifically with the collapsible container. I have also been having a number of layout issues with the collapsible container component. All of a sudden I have the containers in weird positions in a drawer when they were nicely stacked before. Now I have to scroll down a ton to get to the next collapsible container. Sees like I have everything set up and then it goes haywire! Positions change, the collapsible containers get headers where there were no headers. The front end doesn’t seem stable!

Here is an example of a group getting a footer add on randomly. I keep fighting this group component. I think the issue is when I place a group in a footer or a header of anouther component like a modal it will add the coresponding add on to that group. Maybe its best not to use the group component in component headers or footers? I noticed in the example below I have a group in a footer of a modal and then it adds a footer to that group. In anouther component I had a group in a header and it kept adding the header add on to the group.

@benjaminfortunato Thanks for reporting this and sharing the details! I want to make sure I fully understand what happened before we dig in. :folded_hands: Would you be able to put together a screen recording or a JSON export of the relevant app?
If neither of those work, we would love to have you join Office Hours next Tuesday or Thursday, component questions like this are really best to debug live!

I have to see if this happens again. Right now I’m trying to get things moving so I’m avoiding this pattern. I would take a container or a collapsible container and then group the elements in the containers header and footer into a horizontal stack. What will happen is the group inside the header will create a header and the group inside the footer will create a footer. It seems that these are add-ons, because the group is nested inside a header that group gets a header add-on without the user explicitly defining it which then creates a mess and ruins the ui. The user needs to go through and rearrange items in that group so they are no longer in the groups header or footer but in the main group. Then the code will add the header or footer addon again and ruin the ui and the cycle begins again.

@benjaminfortunato I see what you mean, it would really help with any potential bug reporting if you could grab a screen recording or a JSON export of the relevant app the next time this happens? Thank you!

Here is an example of what I was talking about on a modal.

The modal was looking fine and then all of a sudden we get a header on the group and the icons are put in the header

I can’t upload a json of my app it exceeds the size limitations. Not sure I would want to do that anyway. I don’t know how to just send you a json of this part of the app.

I stopped creating groups in headers and footers because of this bug, it will auto-create a header and then move your items to that header if the group is located in the parent object’s header, in this case a modal