Solved

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

44 replies
25106 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

Components, variants and instances

This topic has been closed for replies.

Andrew_ChanSolution

Figmate

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!

Show previous replies

jhalak_doshi

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.

Su1

I had the same problem! You simply need to use “Mouse Up” instead of “On Click” 🙂

Jorge_Lozano_Cerrato

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…

Andrew_ChanSolution

Figmate

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!

malicia

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.

Paul_Van_Tuyl

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

Tomas_Marek

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.

Patrick-Plaggenborg

Active Member

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:

Mouse Down
Mouse Up

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:

The Click interaction is ignored

Workaround:

Use Mouse Up instead of Click in the prototype

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:

Click = Mouse Down with cursor on Instance, then Mouse Up while on that same Instance
Mouse Up = Mouse Down anywhere on the screen, then Mouse Up while on the Instance you set the interaction for

Would love to see the proper Click interaction fixed as this is broken now.