Hello, Figma masters!
I’m testing the new “usage of variants with different sizes” feature in the interactive components playground, and it seems I’ve found a mismatch with the hover effect of menu items when the “Mouse leave” is set to the open menu. Let me explain.
I have a “Select a topping” button in the default state (empty with grey stroke). In the instructions, it is said that I need to set “Mouse enter” action to it. When the cursor touches the button in its default state, the menu with menu items opens. When the cursor touches any menu item, it turns blue (the hover effect works). So far so good.
Now I set “Mouse leave” to the whole open menu. When the cursor touches the button in its default state, it opens the menu with the menu items, but this time when the cursor touches the menu items, they don’t turn blue anymore (so, the hover effect doesn’t work). The open menu closes correctly as the mouse leaves it though (i.e. the grey button returns to its default state), but it seems that the “Mouse leave” effect somehow interferes with the hover effect of the menu items (as if it was somehow “on the above layer and thus blocking all that is beneath”, if you get what I mean).
The hover effect WILL turn as it is supposed to in case I set “On click” for both “Select a topping” button in the default state and the open menu, but there still will be a mismatch: by clicking on any of the menu items the whole menu will close. In case the menu items have their own interactions (e.g. navigate to another page, open overlay etc.), those interactions will not be performed.
I hope my explanations are clear enough for you to repeat that in your test projects and check what I’ve found. I would be grateful if you corrected me in case I’m wrong, but it seems to me I’ve done everything right.
Thanks in advance.
Sergey Ezhov,
web-designer from Moscow, Russia.