Interactive components not working when nested inside a main component

Thank you for this detailed reply!

Thanks, Kevin, this workaround works.

Hey @Anastasia_Stallcop, thanks for your comment. It looks like it is the right way to go. In my case, however, the combined components (variants) never worked on the page I have the components. What I had to do was to duplicate the design page where I had the issue and then it worked. I am happy I found a way to fix the issue but the fact that I dont understand why it doest not work really annoys me
.

It is been a while since i started this topic, and at this moment my workflow switched around this problem.

Main thing i understood is that there is no much reason to use main components in your production pages.

In my average wroflow. i created components nested with other components as needed, and then store them in pages following the Atomic Design theory.

Then i grab instances of whatever i need and use them in the layout pages (where i put all the pieces of the screen toghether)

That way i make sure everything is an instance (so main components are safe), and also that everything is interactive.

It also helps into some popular interaction bugs, but that is for another topic.

But to put a solution on this topic: “For some reason, no, Interactive instances does not work inside a main component. They work when the main component is an instance as well. Try figuring out another workflow, that not requires main components to be inside production pages. (which in my oipinion is also a bit dangerous)”

This issue has not been solved. I created an auto layout that expands out. This works fine on its own and also when I turn it into a component. As soon as I create an instance of that component, the interaction of the expanding auto layout DOES NOT WORK. This bug has been around for a really long time apparently and it’s still not fixed??

this is really annoying. please fix.

example file?

https://file.io/6Nk9xO5gjn5o

sample file that shows the bug
open overlay doesnt work in variant2, when opened

other file host

The solution doesn’t work for me. I’m still having this problem when trying to apply interactions to nested instances? My product card is an instance of a component with 8 variants and instances of components inside it, like buttons etc.

I can’t set the “change to” interaction on those buttons unless I detach them inside the card component - you can see in the GIF it won’t accept any changes to the properties, it just instantly reverts back to its original state