Skip to main content

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.

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…

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.

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.

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:

image

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 🙂



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.

Reply


Terms & ConditionsCookie settings