Text properties of nested instances not able to override their default values?

[Mohamed_Haddi]

Hey there,

I’m having this issue with deeply nested instances that are used within components, when I try to change their text property from the wrapping component, the text don’t apply to the wrapping component’s instances. Here’s an example:

I have a wrapper component containing multiple instances of a “dropdown” component, the dropdown instances, when they’re in their “opened” state, they contain multiple instances of an “option” component, which has a text property with the default value “option”.
On the wrapper component, trying to change the text property of those deeply nested option instances doesn’t seem to apply to the wrapper component’s instances… I might just be doing something wrong and I don’t know what it is.

[Mohamed_Haddi]

Here’s a demonstration for the example:

Screen Recording 2023 08 24 at 11 27 53

The “Search” component is a component that is composed of an instance of the “Date Ranger Picker” components, which is composed on instances of the “Dropdown” components, which is composed of instances of the “Dropdown option” component.

The “Dropdown option” component has a text property, the value of which I change in the dropdown instances that are used in the “Date Range Picker” component. But changing them there doesn’t apply to the instance of “Date Range Picker” that is used in the “Search” component…

[Irina_Gheorghe]

Sometimes i need to “reset all changes” on a variant that’s nested into another component and then the properties will refresh. But this will reset any styling you applied to the variant after you nested it.

Save to version history and try resetting the variant and if it breaks just restore your version history.

[Mohamed_Haddi]

I tried as well and while it worked for the Dropdown’s instances’ default and hover states text properties (the label and the placeholder), it didn’t work for the nested Dropdown Option instances’ text properties. I then went ahead and removed the instance completely and created a new one, and that didn’t solve it either, the Dropdown Option instances still have the default “option” value of their text properties.

I will try to move these components onto a separate file and share it here shortly.

[Mohamed_Haddi]

Here’s the file: https://www.figma.com/file/Bo2ZFrkPvj3vGajWDeqfyt/Untitled?type=design&node-id=0%3A1&mode=design&t=OBXtKQnQgi4YpqiB-1

It should look like this:

[Mohamed_Haddi]

Thanks a lot @Irina_Gheorghe for your time collaborating on the file, I’ll look at the resource you sent me and let you know if I fully grasped what you said about pushing the nested instance properties. Thanks again

[tank666]

Interactive component dropdown

To preserve overrides, you need to add a hidden list of items to each of the variants.

Interactive component dropdown

If your variant differs in structure (missing layers or new ones added) from another variant, and also has different names, then this violates the override preserve. So add a hidden list of items to your variants (Default, Hover and Disabled).

Text property does not work properly - dropdown menu

You are displaying the properties of another component. [dropdown] The structure of your variants is different from each other (look at the number of layers in the screenshot), so the overrides are reset. Change this so that both collapsed and expanded dropdowns have all layers. See example:

[Mohamed_Haddi]

Ohhh, makes sense! I will try this right now.
Edit: Problem solved! Thank you very much. It was indeed the fact that the option list only existed in the opened dropdown variant, while it should’ve also existed (and hidden) within the default and hovered variants, in order for the override preservation to work correctly.