Skip to main content
Petr_Chutny
May 27, 2021 12:37 PM UTC
Solved

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

This topic has been closed for replies.
Andrew_Chan
Andrew_ChanSolution
Figmate
Oct 19, 2021 8:11 PM UTC

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!

44 replies

Alex_Roberts
Jun 29, 2021 3:23 PM UTC

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

Petr_Chutny
Jun 30, 2021 12:50 PM UTC

I’ve just tried it now, it still doesn’t work as expected.

J.D_Compton
New Member
Jul 9, 2021 11:36 AM UTC

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.

GeorgeM
Jul 14, 2021 10:19 AM UTC

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?

J.D_Compton
New Member
Jul 14, 2021 5:59 PM UTC

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

GeorgeM
Jul 15, 2021 9:56 AM UTC

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.

Figma – 14 Jul 21

image

J.D_Compton
New Member
Jul 15, 2021 3:16 PM UTC

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

J.D_Compton
New Member
Jul 15, 2021 3:35 PM UTC

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.

GeorgeM
Jul 15, 2021 4:52 PM UTC

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

J.D_Compton
New Member
Jul 15, 2021 5:15 PM UTC

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 🙂