Nested components defaulting to standard property settings after parent component changes variant

Hi,

I think I might be experiencing the same issue, but in a slightly different way.

For me, it is when clicking outside of an overlay, the variables that some of my components are attached to get reset to a kind of null or false.

In the video, show first that my buttons are simply toggling a bool variable, but clicking outside my overlays that has no connection to them resets all of the variables, regardless of whether or not the ‘reset component state’ is checked.
(I would add a video, but this is my first post so I can’t)

Hi there! Hmm it’s hard to know the root cause without investigating with the file directly.
I checked on our backend, and the engineering team is investigating an issue that looks like a bit similar : Nested component variant instance is reset to the default variant on a “Change to” interaction in the presentation view. But yours may be slightly different, can you confirm if it does impact the ‘Change to’ interaction on your end?

It would be great to have a copy of the file to check if we can replicate it and check your issue. If you are able to, please reach out to the support team directly: https://help.figma.com/hc/en-us/requests/new Be sure to use your Figma account email, include your video recording, a link to the file, and share it with support-share@figma.com, so we can take a closer look. Thank you!

Thanks for the response. I have shared my file with the support team now 🙂

Support got back to me with this response:

" In order for the overrides to be maintained between both states of the dropdown menu items, the layer hierarchy must be the same in both variant states. As for the icons, to preserve overrides on nested icons, the same rule applied and all icons should have the same layer hierarchy and naming.

I also noticed that you have Reset component state enabled which will reset to the original component state as set on on the canvas which might also be causing you some issues. You can read a little more here on state management."

Currently testing these out.

Seems like it works if i don’t change the initial states of any of the nested component. But if i change the initial state (like whether or not a navigation item is active) it stops working when i minimize the navigation bar.

Strange thing is that the unsuspected changes that occur to the nested components are different when i preview the component versus if I change boolean property inside the design document

As you can see in the preview mode the icon instance swap actually is preserved but the “active” state (the blue fill) resets.
While on the property change in the design has the reversed effect (state is preserved but icon instance swap resets.

No luck yet on finding a solution though. I will report back later.

Apparently now the preview mode behaves like the example from the design file and if i press on one of the navigation items while the bar is expanded the label stays and the icon disappears when the bar minimizes. On the other hand if I press the navigation item while the menu is minimized the label dissappears when the bar expands…

I’m beyond confused at this point 😅

Still having issues with this component. In hopes of getting some help I created a test file that can be duplicated if anyone wants to see the issue for themselves:

I’ll also add the description of the issue here:

When the nested component “Building Blocks / Main navigation item” is set to its default settings. The icons and labels behave as they should when changing between collapsed/expanded variants of the parent component “Navigation rail”

However when I click one of the nested components, which changes the style from inactive to active (to indicate that the user is on that page) the nested component bugs out.

If the nested component is clicked on in the expanded state of the parent component several bugs appear when collapsing the parent component;

• the icon goes back to default state
• The nested component exposes its sub navigation items which should only be triggered by a hover action and lastly.
• The label is visible even though it is set to hide in this state

If the nested component is clicked on in the collapsed state of the parent component bugs also appear when expanding the parent component;

• the icon goes back to default state
• The nested component exposes its sub navigation items which should only be triggered by a hover action.
• The label becomes hidden even though it should be shown in this state

Hoping for a response 🤞

Encountered a similar problem, made a complex nested component and have been banging my head for 3 hours, going back to the basics to resize the button in it to no avail. Hope they fix it soon

Hello! Has there been a fix for this yet? :((((

Hey everyone,
Thanks for sharing these details! From the knowledge I have, I don’t feel confident enough to give you information that may be relevant, or confirm if this is a bug.

If you have specific instances with complex nested component, it’s best to have a review from our technical quality team directly. This could be a bug (Figma-wide or limited to your file), but it also could be something within your file that can be quickly adjusted, as you can see with Mads_Emmertsen2 example.
(@Mads_Emmertsen2 Feel free to report any new issue you encounter to the technical team by replying to the email you have sent. It will re-open automatically.)

As mentioned, please fill out this form to reach out to the support team directly so we can have a deeper look at your issue: here

Be sure to use your email associated with the Figma account , include a link to the file, and share edit access to the file with support-share@figma.com (you won’t be charged for this). If you can’t share this, they can still help you as best as they can.
Thank you for your understanding, and let’s also keep an eye out for any insights or solutions that others in the community might have!

Figma support already took a look at the component I have made. But couldn’t find a specific reason that could have caused the issue. I was suggested to remake the component entirely to see if that could fix the issue but I haven’t gotten around to it.