Skip to main content
Question

Click interaction on parent component when the child has a "While pressing" event

Baffour

I’ve got an icon button component which has some interactions on it, including While pressing so that I can simulate the ripple effect from material design.

IconButton

I’ve nested this component in a counter component and have tried to make that interactive so that you can increment the number.

image

But attempting to have while pressing and click events at the same time seems to cause a conflict. It’s not flagged as a clash but my counter component doesn’t respond unless I spam click it (I imagine I’m finding a window of time where the icon button is on the original variant?)

Counter

If it’s not a bug and this kind of thing just isn’t meant to be possible it’d be nice if Figma could detect it and flag a warning like it does when you override a variant interaction

5 replies

Andrew_Chan
Figmate

Hey @Baffour - this could be a bug, but it’s hard to tell without looking at your setup. Do you mind sharing the file with me via DM or reaching out to support@figma.com?

Baffour
  • Baffour
  • Author
  • 53 replies
  • March 10, 2021

Done!

Baffour
  • Baffour
  • Author
  • 53 replies
  • March 19, 2021

Hey @Andrew_Chan did you get the file? Did it give you any insights?

j.m_von_wood

@Baffour @Andrew_Chan did you find a solution for this? i have also been trying to figure out how to have a delayed mouse down interaction as well as a click interaction for the same component.

Baffour
  • Baffour
  • Author
  • 53 replies
  • March 30, 2021

@j.m_von_wood Just got a response a couple of days saying mouse up/mouse down doesn’t work with click events, and suggested I use mouse up instead of click on my parent variant. I’ve tried it on the example component I made to share with support and it works okay.

The ripple animation will cut off as soon as you mouse up as it changes to a new variant, whereas an actual component would complete the animation. It’s fine for this particular use case but wonder if there are others where this workaround doesn’t work.

Would it work for you?

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings