Getting problem in re-using the dropdown component

Hi ​@Rizwan ,

It sounds like you’ve done the right thing in checking the same variables exist in the file you are using the component in. Is there a possibility you may have forgot to check or update some of the prototype logic?

When publishing components, the variables are usually available in the new file if your variable collection was pushed as part of your design library file. If you copy or move a component to a new file without publishing the variable collection, any variables used by that component must be recreated or imported into the new file; otherwise, the component will lose its variable connections.

Hope that helps.

Hi ​@Ellwood 
Really appreciate your response on it. Actually when i re-using it in other file and change the variables of option list then in “Present” mode it is still showing options of original components i think it is not replacing the variables.

Here is the recording where i am implementing it. Please check and tell me where and how i am doing it wrong.

Looking forward to hearing from you soon.

Here is the recording link

https://drive.google.com/file/d/1ER03eTdqtoK5zvBT7sDct2RJbnWcj-NN/view?usp=sharing

Hi ​@Rizwan 

Could you take a look at the varaible locations for the select display field, as well as the other select options and see from which file the variables are located?

I made a simple test myself, and pulled the select component into a new file. To get this to populate with variables from my new file I had to create the new vars locally, one for the select display label, one each for the choices AND update all the prototype logic to use the new vars from the new file when an option is selected, as they were still referring the vars in the original file. 

Having done this my select now works as expected with the new values.

Without updating the prototype logic for the select choices to use the new local vars, it was still pulling that information in from the design file the component sits in, which I think is whats happening to you.

Can you check the prototype logic and check from what file your select is pulling the vars from?

Hi ​@Ellwood 

Appreciate your detailed response. Is it possible if you can share your dropdown component figma file?

Actually, i am having same issue and if you will share the component then i will compare with my component and identify the problem.

Really appreciate

Thanks

Hi ​@Rizwan ,

Essentially, for each option in your select dropdown, you need to make sure the prototype click action is updating the new variable you have created locally, and that the select label is also referencing the new local var, so that is is displaying the right option on click.

In the images below, you can see the master component is using local vars (TEST-SELECT/Select-label, etc).

When I want to use this component in a different file, I have to make sure that the new file has the same variables (can be called something different) and that the prototype click actions are updated to use the new vars. In my design file where I want to use the component, I have created a new set of vars (EXAMPLE3/SelectChoice, etc). For the label, and each option, I also needed to update the variables they use to the new design file vars.

If you do not update the vars used on the click actions to use your new options in the design file, the component will pull in the options set in the master component files variables, which I believe is what you are seeing. What you see on the label is not what is being pulled into the var on click.

Hope that helps.

Thank ​@Ellwood  for the help