+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

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 👎

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.

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?

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.

This solved my problem! Thank you

@Feiyang_Coco can you explain this “method” in other words pls?)

C’mon Figma what the heck

When you use while hovering you have 2 states, the standard version and the one that would be mouse hovering, the trick is to place the on click action in the second state, which would be while hovering, because when we press the button we are pressing the second state

It’s October 2024 and the problem is still there in new Figma UI. Did anyone actually managed to get Click working?