In cases where variants size does not match, we will probably have some issues with overlay.
While trying to make a simple dropdown component, it does not seen that “Change to” interactions will be enough.
Even with the common workarounds, detaching the container component and removing auto-layout, there are still situations where multiple components would clash to come in front.
With that in mind comes the question, why it is not possible to use overlay interactions on interactive components?
This dropdown in the specific is used in over 100 screen, without interactive components this interactions would need to be created and maintained in each screen. Isn’t this the kind of situation that interactive components is trying to solve?
I realized something: it’s already possible to achieve this without Interactive Components. Just create a connection from the main component of this icon to the overlay, this connection will be propagate to all instances on the same page.
Thank you for the thought, it definitely helps when it’s not a nested instance with overrides in the container component and if the component is used in only a few pages.
Fortunately in my case, the workaround that reverses the z-index order of the auto-layout using a double 180 trick, worked just fine. This let me preserve the instances in all pages the component is being used and keep the auto-layout.
Coincidentally the spacing between icons is the same as the padding in the dropdown. So the previous icons, the arrow right in the image, does not overlap the border of the dropdown. But it is probably a fragile solution, if the auto-layout is recalculated after the swap it will probably break the layout.
Sorry for keeping my hopes too high, and thank you again for your consideration
