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

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 :slight_smile:

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 :sweat_smile:

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”

image 1

image 2

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

image 7

image 8

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

image 5

image 6

Hoping for a response :crossed_fingers: