Figma Support Forum

Interactive components not working when nested inside a main component

Hello, I found out that if i create an interactive component (ex: Button), and place it inside a a main component (obsiously as an instance), the interactions are no longer working.
But if you create an instance of the parent component, then it all works as expected.

19 Likes

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.

1 Like

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 :confused:

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.


I added the checkbox by dragging the component form the assets tab.
Pretty new to the software and UI Design in generell, so very thankful for any advice.

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

1 Like

please fix this :green_heart:

2 Likes

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!

1 Like

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 :stuck_out_tongue:

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?

1 Like

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.

2 Likes

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 :neutral_face:

1 Like

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?

2 Likes

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 :frowning_face:

2 Likes

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! :exploding_head: 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.

2 Likes