Skip to main content
Petr_Chutny
May 27, 2021
Solved

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

  • May 27, 2021
  • 44 replies
  • 24996 views

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.
Best answer by Andrew_Chan

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
June 29, 2021

@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
June 30, 2021

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

J.D_Compton
New Member
July 9, 2021

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
July 14, 2021

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
July 14, 2021

@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
July 15, 2021

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
July 15, 2021

@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
July 15, 2021

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
July 15, 2021

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
July 15, 2021

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 🙂