Language selector breaks inside a Header component
Hello Figma Support,
I am reporting a possible prototype bug affecting an interactive component nested inside another component.
By “language selector,” I mean a control on the right side of a website header. It shows the current language as a flag and a short code, such as EN. Hovering reveals an arrow, and clicking opens a vertical dropdown below the control, containing flags and other language codes, such as DE, FR, and IT.
How it is built:
The selector is an instance of its own component set. Its closed, hover, and expanded dropdown states are separate variants. The dropdown is part of the expanded variant.
The relevant interaction sequence is:
- Closed state, 131 × 52: Mouse enter → Change to the wider hover state.
- Hover state, 170 × 52: On click → Change to the expanded dropdown state.
- Expanded state, 240 × 274: Mouse leave → Change to the closed state.
These transitions use Smart Animate with Ease Out, approximately 150–200 ms.
The selector sits inside layout frames within the Header:
Header → Main → Body → Right Bar → Language → selector instance.
Steps showing the problem:
1. Keep the outer Header as a regular frame and run the prototype.
2. Hover over the selector and click it. The dropdown opens correctly and closes when the pointer leaves.
3. Convert the outer Header into a component and place an instance of it inside a page frame.
4. Run the prototype and repeat the same interaction.
Expected:
The nested selector should keep the same appearance and interactions inside the Header instance.
Actual:
During the interaction, the EN label disappears, the flag shifts to the right, and the dropdown does not appear. The EN label later reappears.
Clip content is disabled on the outer Header frame, component, and instance. There is also a warning about duplicate variant values, but that warning already exists during the successful regular-frame test. The suggested troubleshooting methods did not resolve the issue.
Please investigate what causes this difference between a regular parent frame and a parent component instance, and provide a reliable fix or workaround. I need this selector to work inside a reusable Header that will also contain a Clothes hover menu.
This issue prevents me from completing my interactive Header component. Could a member of Figma Community Support please confirm that this report has been received and explain the next step? If it is escalated for technical investigation, please confirm that here. I would prefer to share any reproduction file privately with Support.