Interactive components not working when nested inside a main component

I ran into the same thing. It looks like a click interaction (on click, mouse down, mouse up, while pressing) will work, but mouse enter / mouse leave / while hovering doesn’t.

Same issue here. I have a dropdown interactive component with the expanded and collapsed state as variants, then I have an instance of that in another component. I initially joined the beta to see if this would solve this, but I guess there are still some bugs to fix 😕

Partial interaction working for me. I have a button nested in parent component. The mouse-in state triggers, but mouse-leave and on-click are not working. Button component stays in its hover state until I restart the animation with a refresh, etc.

Hi, I think I have a related problem. I created an interactive checkbox with two states. However, when I add it to any layer, the “change to” interaction does not work.

Same issue here, I noticed that since day one of the beta.

please fix this 💚

Have the same issue, i’m glad I finally realised it wasn’t just me.
This is a an important one to fix. Building a larger library of components this is a must have!

I’m having the same problem. The workaround I found it to break the parent component and paste it onto every frame of the prototype…which is quite time-consuming 😛

If there was a multi-state feature within an element, this entire problem would be solved.

I’m having the same issue! Any news given that today interactive components went public?

I’m having the same issue. The variant interactions break when the child component instance is nested within another parent main component. However creating an instance of the parent component restores the interactions of the child component.

The existing workaround is to make sure you are navigating to component instances (not main components) when creating prototypes that require nested variant interactions.

I have created a component like pills that have a close option, when I inserted in a filter component the auto layout is not at all working. Can you please help me? Thanks

I have the same problem. Interactive components are out of beta, but this seems still broken, unfortunately 😐

Same problem here 🥲

It’s a great deficiency that I’m not able to use the power of our Design system for interactive components.

It limiteds me in my daily work. I still have to switch to other prototyping tools.

I would like to use the full potential of interactive components by nesting them in other components. So I only have to set/design the interactive behavior once.

I’m curious why @figma hasn’t addressed this bug/feature yet?

Similar problem for me. I am no table to cerate new working interactions on instances of variants component nested in main variant component. I can ceate interaction, but in Chnage To sectrion I am not able to change the variant. The value of property does not react on click attempt.

Just wanted to add that it happens to me as well. Very confusing and somewhat hard to find, I spent quite some time before I understood what was happening.

Same here. I was hoping this was an issue with beta, but alas. This makes variant interactions completely useless feature. Virtually all basic building blocks that would benefit from having variant interactions are in turn used in other components. Checkboxes, radio buttons, dropdown menus – that’s what is typically #1 to be converted to component and used in other basic views… which are usually components too. Utter disappointment ☹

Update. Looks like this is some sort of nasty bug specific to pages.
I started from scratch. New document, no library etc. Created several components with variations. Created interaction within, wrapped them up in new several layers of other components. Everything just works! 🤯 I can click on checkbox and it switches on-off regardless of how deep it is nested.
The problem is, nothing works if I do exactly the same steps in my actual project file. Curiously when I created new page inside project file, there everything works. It seems as if variation interaction are disabled on old pages, regardless of what the settings says.

Still not working. @Jordan_Romanoff described it nicely — mouse enter / mouse leave / while hovering doesn’t work if nested inside another component. ☹

This happened to me. The fix was to use the instance of the master that contains the nested interactive component.

Basically if this is done inside a master, and that master shows an interactive component’s instance, the instance refuses to react.

Not sure I do understand the fix. Can you elaborate more? Can you give an example?

@Marko_Kosovic I just went through something similar, I think I can help explain.

Interactive components seem to work as expected when they are within an instance of a component but not when they are within a main (master) component. So if your prototype includes instances of components instead of main components, they should work.

@Jayna_Moloney Thank you for clarifying. That goes without saying.
Playing prototypes doesn’t work without having regular frames, so you have to use instance any way.

But seems like it doesn’t work in some specific pages in the way you described either…
And I was experiencing the same issue with library import.

When I create a new file, it does work!
But as mentioned before by @Constantine_Zuev , it’s buggy and unpredictable.
Even if you turn on/off “Enable interactive components” some pages have the same bug.

I have come across a similar issue. I have made an interactive dropdown. It works fine when it’s not a component, but as soon as I make it in to a component, and then make an instance of that component, the interactive behaviour causes the Figma prototype to crash.

As a tip for anyone else reading here, I have managed to work around it for now by making the master component have a non-interactive variant of the interactive component in it, then switching to the interactive variant in the instance. But this is not ideal!