Customized menu items revert to their original state in the prototype

[anselmo-ssoltech]

Steps to reproduce

Link to live example:

Steps:

1. Insert instance of Select or Autocomplete
2. Turn on Active switch in order to activate menu list
3. Customize values of menu items
4. Turn off Active to close menu list and change State from Focused to Enabled
5. Run prototype
6. Click Select or Autocomplete instance to open menu list

Current behavior

Menu list popup shows original menu items - 3 Menu Items and 1 divider.

Expected behavior

Menu list popup should show customized menu items

Context

I tried to add an autocomplete instance with the menu items I wanted to my UI. When I run the prototype while the menu is open, the customized content displays correctly. However, if I run the prototype while the menu is closed, when I click to open the menu, the customized content disappears, and the menu items revert to the default settings from when the instance was first created. Since the UI typically starts with the menu closed, I think this issue is important.

Your environment

Software	Version
Design file version	v5.16.0
Design tool	Figma
etc.	Community

Search keywords: select autocomplete

[adrianmanea]

Hi Anselmo, that's correct , the overwrites get reset to the original state. The only way to keep your overwrites is to start the prototype with the Active set to true.

[danielJordan1]

Having the same issue! Is there not a better fix for this so that the select doesn't need to be active?

[adrianmanea]

Is there not a better fix for this so that the select doesn't need to be active?

Yes, you can create a custom component and replace the default one with yours!

[adrianmanea]

Answered in another ticket. Let's keep this one open since it's a consistent issue Figma might not solve any time soon 🫣.

In prototype mode Figma loses the new values if you have a modified <Menu> inside the <Select> that is correct. There are a couple of options here:

Option 1

If you start the prototype with the <Select> active set to true Figma will remember your changes.

Option 2

Another option is to create a new contextual component <Menu> that you replace in your <Select>. Simply drag and drop a <Menu>, detach it, make your changes and create it as a component using an underscore prefix (_) so it won't get published. E.g "_Account Forms / Settings Dropdown" and replace the default instance with your new component.