Figma Support Forum

Interactive Component not working in overlay

I created a filter menu where every list item is an instance of the same interactive component to manage a hover state.

When putting an instance of the filter menu straight on a frame, the interactive component works as expected. When hooking it up to the dropdown button and letting it appear as an overlay, the filter menu does appear but the interactive components aren’t working… i.e. no hover states.

2 Likes

I have (what I think is) the same problem—in particular, when nesting an instance of an interactive component within another component (interactive or not), none of the hover interactions work.

  • Page design (non-interactive component)
    • List
      • List items (interactive components) :x: No interactions
    • Modal (non-interactive component, shown as an overlay)
      • Buttons (interactive components) :x: No interactions

They work if, say, neither the modal or the page design frame are done as components. That’s not really a workable solution, though; I don’t want to have to sacrifice maintainability of my designs/artboards for maintainability of my components. :unamused:

Experiencing the same problem.
If I use an interactive component in a page component, it will not work in the prototype when going to that page component. However it works on an instance of that page component.

Hey @Nate_Green - interactive component instances currently won’t work when inside components. They will work inside instances of that component, however. If you need interactions inside of components and not just instances of the component, we’d love to hear more about your use case.

@kdeebee - this sounds like a bug. If possible, could you share a file with me via DM? A video of the bug occurring would also be helpful. Thanks!

None of the components on my prototype are main components; they’re all instances. However, the problem also seems to have disappeared since I posted this, and I didn’t remember to follow up. So I guess I’ll reach back out if it comes back.

My brain is broken…I fixed the issue by not using components for my main frames.

My use case is this: when I make a page design, I turn it into a component. Then if I need to make a mockup showing an overlay, or showing the page content in a different state, I can use an instance of the page design as a starting point rather than duplicating it. If the overall design of the page changes, it updates all the instances, and I don’t have to go through each subordinate one to make sure they’re consistent.

Thanks @Andrew_Chan !

@Andrew_Chan Thanks for your message. I just dug up the file and when doing the overlay, I was linking to the component instead of an instance of the component so once I updated that, it worked as expected. Tx.

I’m confused. Why would I have to create an additional variant on a component just so the internal elements are interactive?

Literally, there’s no difference between the two variants here, but once you select the second option, magically the interactions inside work. That is a really odd thing to have to do.

Is this going to be fixed?

I’m not sure I understand your use case. you don’t need to create a new instance just for the sake of having two. Each variant should have something different from the other. That’s the point of having it.

The issue the others were having, I included, is the fact that you can’t use directly a master to link it somewhere, because the interactive components won’t work.
In your example, if you have states for nav-items, if you put the master in a page, the states for the nav-items won’t work, because they’re inside of a master.

But, as a good practice, as you already know, masters live in one place, and in your design, you’ll use instances (and the states for the nav-items will work).

I hope this helps.
Cheers!

I think I have the same issue.
I’m using a hover variant for cards.
When the side menu is previewed by itself the hover states are working as interactive components.
When I include the side menu in my main prototype it loads as an overlay.
The components no longer change on hover when loaded in the overlay.

See video for example

1 Like

Just started working now, typical :smile:

I structure my components and page designs in the same way. I design a large application and in order to separate the outcome from each functional area within the app in each page. To be able to showcase interactions between these different functional areas I create interaction prototypes that reference the page design as component instances in other pages. To be able to manage a cohesive page design on the referenced pages I have to have the pages as components.

It would be great if interactive components could work within parent component instances.

1 Like

I think they actually do; my problem was, I was using the main components and the interactions weren’t working in those. If I use instances it works fine.

i want to chieve the same thing… how do you make it work?

Sorry for the delay, I didn’t do anything different it just started working again.
In the main screen, clicking a button will introduce the side panel as an overlay.
That frame containing the side panel has those cards setup in prototype so that on hover the component changes the state from default to hover.

@Mikey_Cannon this is strange. i tryes a simmilar scenario, nesting the interactive compoenent inside an overlay and it didnt work for me. i wonder what is the condition to make it work.

Hey everyone! I hope I’m on the right thread. I’m trying to make an interactive component work, but it doesn’t work as it’s supposed to.

The problem is when I choose the change type to any other (f.i. open overlay), it loses the connection to any variant of the component (or the connected object of the variant). I’ve tried both a component with text and a rectangle and a component of two framed variants (for AL purposes). Same problem in both cases.

What am I doing wrong? The Figma desktop app says I’m using the latest version of the app, no updates are available.

@Andrey_rus, in your video, I didn’t notice the “Change to” action. This means that interactive components are not available to you. Have you applied to participate in beta testing?

1 Like

I thought those are in the box with the yearly subscription already, haha. I found the form for beta testing sign-up. Thanks for giving me a direction!