Nested instance swap with hover state causes unexpected behavior when switching between variants

Ask the community
1

I have a component that switches variants when hovered. I use this component inside another component as an instance swap that when clicked opens a menu. This is put into another component which causes the issue. When the menu opens and you un-hover, it switches back to the original instance swap component.

Here’s a video of the issue:

Here’s a link to a file showcasing the problem: https://www.figma.com/file/EEwfAfdvxUZVvhVah4D2Eg/Nested-instance-swap-with-hover-state-causes-unexpected-behavior-when-switching-between-variants?type=design&node-id=0%3A1&mode=design&t=iun0muPecW2phb10-1

Things that stop this behavior:

  • Detaching the final component
  • Removing hover state

I’ve looked at other topics and couldn’t find a fix for this. Have any idea what could fix this?

1 Like
2

Hi @Dominik_Ilja, Thank you so much for getting in touch and for detailing the issue with your prototype. I really appreciate you sending over the recording and the file—it helps a lot!

From what you’ve shared, it seems like clicking the bell icon opens the notification panel, but there’s an issue when the mouse moves away from the icon, as it changes to a square with arrows.

I appreciate you taking the time to explore our community and even troubleshooting this issue. If detaching the parent instance stop this behavior, I suggest reaching out to our support team for further investigation here: https://help.figma.com/hc/en-us/requests/new

When contacting our support team, please include the following information so that they can take a closer look:

  • Use the email linked to your Figma account.
  • Include a direct link to the file and the related library file. Also, please invite support-share@figma.com to the file with “can edit” permissions. Don’t worry, this won’t impact your billing.
  • Please attach the video you shared along with your explanation. In the explanation, if you could use the actual names of the components or instances involved, that would be really helpful.

Hope it helps! Also, if anyone else in our community has further insights or tips, please feel free to share.

Thanks again for reaching out to us!

1 Like
3

Hey, thank you!

I submitted this to support

1 Like
4

I encounter the same issue with the pop-up component. The bug appears when the trigger includes a hover variant, such as a button.

Current solution:

  • Create a “Trigger” component for the pop-up component.
  • Use this “Trigger” instance within the pop-up component.
  • Replace the nested “Trigger” instance when create real dropdown blocks.

Check [The Figma File Link]:heart_hands:(https://www.figma.com/design/c55dTpIb2uLHUG1InTJF3x/Nested-instance-swap-with-hover-state-causes-unexpected-behavior-when-switching-between-variants-(Copy)?node-id=0-1&t=TezwHcacRazf0DYr-1)