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

Instead of Mouse Down, use While Pressing

1 Like

Figma refuses to fix this bug … It always ruins my workflow before a big presentation

2 Likes

I’m experiencing this same problem right now. Makes interactive components useless for me. Will there be a solution to this?

1 Like

Still running into issues with this ‘click’ interaction and having to resort to use ‘mouse up’ instead. Please fix this figma.

I run into this constantly, but realized why it’s happening; if you make a variant for the hover state of your interactive component, that variant is the new component present in your main scene. So linking a click from the default component won’t work. You must link from the hover variant to the new target frame.

Sorta defeats the purpose of keeping tidy components independent of the main artboards, but whatever. Still hoping Figma will fix this someday soon so you can hover and click from the same component.

8 Likes

Any news? I have the same problem…

1 Like

+1 I have the same problem…

Seems like no solution to this yet as I’m currently having the same problem.

Mouse up or down or while pressing doesn’t work at all. IT STILL ignores the “on click” interaction.

Seems like duplicating the text or button inside the hover component is the solution for me.

I used the sub-menu asset to apply the Mouse Enter and On click interaction to my page.

Can not still properly use interactive component triggers and prototype triggers. Any solution? @Figma_Support

On top of this, I’m having an issue where interaction targets are disappearing when clicking through component variants. Like an arrow to expand a menu; the arrow is part of a nested component that services the encompassing component, and if you change through variants in prototype mode, sometimes the button just stops recognizing inputs.

I’ve triple checked that all layer names and layer structures are identical to facilitate this component but it still keep breaking.

Same problem, now over 2 years later. Figma’s silence on this is astounding @Figma_Support

3 Likes

The issue is still here.
Reproduce:

  1. Create a button component with 3 variants: Normal, Hover, Active
  2. Create variant interaction from Normal to Hover: While hovering → Change to → Smart animate
  3. Create variant interaction from Hover to Normal: Mouse leave → Change to → Smart animate
  4. Create variant interaction from Active to Normal: Mouse leave → Change to → Smart animate
  5. Create variant interaction from Hover to Active: Mouse down → Change to → Instant
  6. Create variant interaction from Active to Hover: Mouse up → Change to → Instant
  7. Create interaction on instance of this button component: Click → Open overlay → Dissolve

No overlay on button click :-1:
As mentioned above, the Click is hijacked by the Hover variant. So at this moment you are not allowed to have a button Hover state and button Click event at the same time.

Workaround

Use Mouse up event on the button instance instead of Click event . In this case your clicks works.

4 Likes

I had the same problem! I used “Mouse enter” instead of “On Click

“on click” interaction not working while component prototype is on hovering

I hope there is a solution soon

Yes this worked for me finally.

I realized that not only were interactive component click events not working, but the page-level delayed events were acting up too. Here’s what I observed:

  1. This problem was only happening on mobile devices.
  2. Sometimes, for some mysterious reason, these events would start working after a while.
  3. While I was trying to debug, I noticed that some files were loading.

I had a hunch that it might be related to a network connection issue. So, I decided to disconnect my Wi-Fi (the one I use at work/corp) and switched to LTE for testing. To my surprise, after making this switch, everything, all different events, started working properly.

Holy cow @Lorem-Possum ! How did you figure that one out? That is HUGE! Thank you.

Only thing for me is that I am trying to use a variant to show an overlay.

Imagine this:

  1. hover a pagination page number.
  2. the hover state changes per the variant.
  3. click to show an overlay.
  4. the hover state becomes now the pressed state, per set in the variant. And the overlay is showing.
  5. You can click outside of the overlay to close it.

Problem: The initial pagination number…is now stuck in the pressed state and will not revert to the base state.

I was trying to do this with a click interaction, but your suggestion of on mouseup, made it work! But still unfortunately nothing will let me reset the “…” to the base state. It stays in the pressed state.

(I deleted the sample prototype that I had posted. Need to move past this. I just got rid of trying to do the interaction states and took off the state change.)

Hi, have you tried the “Reset component state” checkbox in the interaction popup?
Снимок экрана_2023-11-27_15-25-49

That has no affect. The issue is that the interactions within the variant are isolated. The component state that needs to be reset lives in the component variant. Not on the container component as in your example.

The variant interactions do not have the option to reset component state. Thanks Figma!

Seem like I got a solution. I also had a same situation like a lot of people in this comment section. My solution is I also give the same prototype property to variant which is the stage that my main component is in when the press prototype property is working. I hope you get the point. I’m not very fluent in English.