I have a large prototype with several sets of nested components that was working perfectly (for the last 4 months) until very recently. No changes were made to the prototype during this time frame and I only recently discovered that it no longer works properly.
In this prototype, I have set up a ‘shell’ component with a nested component inside of it. The nested component has an instance swap property and the instance has multiple variants. To use this, I create an instance of shell component, update the nested component instance by swapping it to the desired one, then update the content of the nested component instance as needed. Things get weird, however, when I try to change the variant of the nested component instance. It’s hard to explain, so I’ve included an image with screenshots that correspond to each point below.
-
Here is the shell component with the swapped nested component. The nested component has variants for a ‘Default’ and ‘Hover’ state. I have updated the label and helper text in the nested component.
-
Now if I change the variant of the nested component from ‘Default’ to ‘Hover’, the edits I made the to component disappear and the default label and helper text of the nested component are shown.
-
When I change the variant of the nested component from ‘Hover’ back to the ‘Default’, the default label and helper text remain.
-
Here’s where things get really weird. If I change the variant of the nested component from
‘Default’ back to ‘Hover’, the edits I made to the nested component are correctly reflected again. -
Finally, if I change the component from ‘Hover’ back to the ‘Default’ state, the edits made to the nested component are still reflected correctly.
-
This seems to fix the issue and everything works normally from this point forward. I can change the variant of the nested component with no issues and the changes are correctly reflected.
This bug is especially frustrating when it comes to prototyping. If I set the nested component to change to the ‘Hover’ variant while hovering, it goes through the same process as above. The user of the prototype must hover over the component multiple times in order for it to ‘fix’ itself and start working properly.