Hello,
I have created a “Button” component with a hover state. It uses “mouse enter” in order to “change to” its hover variant.
When I use such button in my design and add “click” prototype interaction to show an overlay, nothing happens on click:
Prototype:
After deleting the variant interaction from this instance, the good old “click” actually works:
Prototype:
@Petr_Chutny Did you ever resolve this issue? I’m experiencing the same problem when trying to use an interactive button in a prototype - on click won’t trigger navigation to the next frame.
I’ve just tried it now, it still doesn’t work as expected.
Click has never worked for me in interactive components, I’ve always had to use mouse interactions (mouse up).
It works as expected on click, you just need to ensure that there are no other interactions overriding it (having two mouse ups can cause issues sometimes.)
After testing a bit, mouse up can be more performant as well, so I’d check that out until a fix is implemented.
Weird problem. I have a button component on a shared Design System with variants and interactions on that variants (hover, mouse down, mouse up etc.).
Everything works splendidly if I paste this component to a new file, view it on prototype has all the interactions. All variant interactions are there!!!
But! if I want to add a new f.e. click interaction on that component it doesn’t work. It keeps the variant interactions of the master component but somehow neglects to listen to the new click interaction.
In case it helps the variants have 3 states with the following interactions (Hover, Mouse Down, Mouse Up)
Is there any solution on this?
@GeorgeM Currently there isn’t. If you’d like click events in variants then use mouse up, however if you already have a mouse up assigned it will be overwritten in your flows. I’d detach mouse up and find other ways of getting the click event to work other than mouse up. Mouse down will work in these cases if the action permits it.
Yes that’s what I do but I lose all interactivity of the variants.
I thought that adding a new frame or shape on top of the variant will do the trick, but the mystery is bigger than what I thought initially.
Even if you place a frame on top of a variant, the area that the variant occupies, is overriding all other interactions. And it
s only that area – that’s the weirdest of all…
To give you an example see the following file.
@GeorgeM that makes sense to me though, as the z-index for each interaction should be above the latter. If you don’t mind, can you make this editable? I’d like to test/dig a bit deeper into this one.
Nvm just downloaded and will reshare this one. I’ve made a few changes to the buttons, and showed one with click as the interaction overlay to illustrate how I got it working.
Wow. Haven’t thought about the mouse-up interaction.
So the solution to my problem is the problem with click interaction on variants. I changed my approach with mouse up and imagine what – it worked 
Updated file here
Yeah, can be a bit weird at first, but once you understand that you can put a mouse up on the instance while still having it in your variant, it changes things a little bit. Looking good @GeorgeM ! Hope it helps just a little 
Try connecting the component with the frame with on click trigger and the original one with the while hovering, might work out…did work for me.
I don’t know why some thing as important as click event doesn’t work… And @anon21722796 didn’t anything to fix it?
I tried Figma for the first time but I deeply regret… I would have used Adobe XD for my prototype as always… Now I don’t have time to remake it…
Hi @Jorge_Lozano_Cerrato @Su1 this actually sounds like a big bug. Can you DM me your file or let support know that we’d like to escalate this? You can cc achan@figma.com and invite the same email to the file to make sure I have access. This’ll help us figure it out faster.
Thanks!
Hi Andrew, I have the same issue: the mouse up event in the interactive variant overrides the click in a prototype. I am trying to add hover states to buttons on a library (with mouse enter, down and up etc), but once that is in place, existing prototypes that contain buttons stop working.
Hi @Andrew_Chan, I have also found that various variant interactive states override each other and they override frame interactions.
Here is a basic test that took me about 5m to set up: Figma
Yes it is not a happy issue, but I am using a simple “hack” - instead of using “Click” you can use “Mouse down” and this is an easy working solution.
Looks like a bug indeed. @Andrew_Chan @anon21722796 this has not been solved yet. I still have the same issue.
The Interactive Component contains interactions between variants to simulate a button press down:
When using an Instance of that component in a Prototype I want to add a ‘Click’ interaction to simulate the action upon button click.
Problem:
Workaround:
This works, but has the side effect that clicking and holding anywhere outside the Instance and then releasing (Mouse Up) with the cursor over the Instance will also trigger Mouse Up.
Does not happen often but can cause confusing and makes Mouse Up a hacky workaround.
Expectation:
Would love to see the proper Click interaction fixed as this is broken now.
Hi! It’s been a year now, when will this bug is being fixed? Now even the mouse up etc. won’t work.
