I have made a side menu that contains several layers of nested components. The issue is that when i enter preview mode some of the properties of some of the nested components (but not all) revert back to default whenever the parent component changes variant.
Problems include:
- Icons that have been swapped using instance swap property reverting back to default.
- States (Active/Inactive) reverting back to default
- Hidden elements reverting back to default. I.e. will be shown again
- Text properties resetting back to default
Again, not all nested components are experiencing this issue which is the weird part seeing as they are instances of the same component.
I have attached a video of the issue.
Any thoughts on what could resolve the issue?
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)
2 Likes
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 
1 Like
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.
1 Like