I have a dropdown component with variants for its open/closed states.
• If I test it on its own it behaves as expected: it opens on click and closes on mouse out.
• If I nest the dropdown component into another component “B”. It behaves as expected
• If now I have 2 instances of component B. If I click on one of the dropdowns, it opens, but clicking it a second time also opens the dropdown on the other instance. Sometimes it doesn’t even open its own dropdown, only the other one ?!? so 2 dropdowns are erratically controlled from one. Strangely enough, this only happens from instance 1 to instance 2 but not vice-versa. This despite being identical at all levels.
Also, hovering over the dropdown is “sometimes” causing unrelated bits of text to shift a pixel down.
It’s all very strange, hard to explain and hard to troubleshoot but it’s really impairing the ability to prototype anything.
I’m getting the impression that nesting components with variants and interactions and using autolayout is a recipe for random and unusable behaviours. This makes anything other than a basic clickthrough prototype impossible to make.
Please prove me wrong!