Figma Support Forum

Text Override doesn't work on nested variants with interactive components

So this is what I have:

  • A Toggle element variant with states for enabled, hover, and active states. I set the interaction on the enabled state to change to the hover state while hovering.
  • A toggle variant with 3 tabs and one variant for each one (because I need them to be mutually exclusive). I set the interaction on each tab to change to the corresponding tab on click.

When I place the component on a frame and change the text inside of each tab, it behaves well. Also when I switch the variants the text overrides are treated well.

When I play the prototype, the hover states behave as expected, but when I click on each tab, the text resets to “Label” instead of maintaining the override.

image
image

I’ve tried to delete the auto layout and still have the same problem, so I guess it’s not that. I guess it’s just a bug.

Hope it helps!

1 Like

Hey,
when I recreate it, it seems to be working for me. Any chance that you could share your file and I can take a look into the structure?

— Niko

Hi Niko, sure. Here it is:

Yeah, ok, I played around with it a bit and I’m pretty sure it’s a bug. I’ll file it and thanks a bunch for the file!

3 Likes

I’m having a similar issue creating drop down menus. The overrides work at first, then they eventually stop working and show only the main component text.

Weirdly, if the button is outside a main component, the hover action shows the default text for the button and menu, then reverts to the overridden text for the button on mouse out. However, if it’s inside an instance, the hover shows the default button and menu text AND retains the default text on mouse out.

Here’s a link to an example: Figma

Same here. As soon as I add any interactions to the nested components in this file: Figma
the text overrides simply stop working, apparently at random. Sometimes one of them sticks, sometimes it doesn’t :man_shrugging:

I’ve created a simple dropdown menu with a couple options. Each Option is a component with hover and pressed states itself. In my dropdown component I wired up the interactive states to choose between options. When using the component as is, all the variants behave as expected, meaning all text overrides for the specific option names stick across variants. But when I actually play the prototype, the naming overrides only show up at the start. Once I start selecting an option from the dropdown menu, all text overrides fallback to their generic names. I’m happy to upload a file for debugging purposes but don’t know how. Thanks for your help.

You don’t need to upload the file, simply share a link to it and make sure that in the Share menu it’s set to “anyone with the link can view”.

I’m having the same kind of issue with my files, not with all components (as I could check) but a card component don’t get the override texts correctly

Hey folks - this should have been fixed recently. If you’re still experiencing the issue, can you let us know? Thanks!

How should this be constructed for it to work correctly @Andrew_Chan? I’m still seeing my overrides change to the default button label. The same happens with the icons on my buttons: they are replaced with the default/initial icon…

Hey @RichPeniche, the setup in the original post should work. If you’re experiencing issues, could you share a file with me via DM? You can make sure I have access by inviting me through email: achan@figma.com.