How to fix dopdown menu instances from changing other dropdown menu instances on different frames?


I created a dropdown menu component with two variants (collapsed and expanded). I set the interactions to where when you tap on one of the items in the expanded list, it will set the default text variable displayed to the text for the selected item and change the state back to the collapsed menu.

I have instances of the dropdown menu component on several different frames, but when I enter prototype mode if I select an item on one frame from the dropdown menu, when I go to another frame that item text is already displayed in collapsed dropdown menu instead of the default text.

For example, if I go to customize an item the first time the dropdown menu displays “select option” and I can choose the option “wheat bread” and it will display “wheat bread”, but when I go to a different frame to customize a different option it will already be displaying “wheat bread” instead of displaying the default “select option”.

Anyone know how to fix this?

Hey @Amy_Phillips, to have a better understanding of your issue I would need to see a screen recording or a copy of your file.

Hi, I have a similar issue. I have screen recorded the demo but Figma will not let me upload it so here is google drive link to it.

Clicking on the drop down items “Nigeria” and “Ghana” navigates to the yellow and purple frames respectively. The issue there is that the frames display the dropdown as open instead of collapsed

@Gayani_S just tagging you. :wave:

So I ticked the “Reset component state” checkbox and it worked. :man_facepalming:

Hey @Darlynton, thank you for the screen recording. Glad it works!

1 Like