Figma Support Forum

When using an interactive component in a prototype, "Click" doesn't execute

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:

CleanShot 2021-05-27 at 14.36.29

After deleting the variant interaction from this instance, the good old “click” actually works:

Prototype:

CleanShot 2021-05-27 at 14.37.04

@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.

image

@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.

1 Like

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 :tada:

Updated file here

2 Likes

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 :slight_smile:

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 had the same problem! You simply need to use “Mouse Up” instead of “On Click” :slight_smile: