How to cancel "WhilePressing" effect?

Hi folks.

I stumbled upon a simple Dialog open behavior. If I use a component with “WhilePressing” visual effect (like e.g. background dimming), then both onTap and onTouchUp actions won’t cancel the effect.

Here is a sample design file: https://www.figma.com/design/rC5hQVyjoS3ubnRHTmnW8D/Tap-animation?node-id=0-1&t=eLdLBq0A6LpgurTr-1

There are two pages:

  1. Page1: onTap
  2. Page2: onTouchUp

that only differ in their trigger action type.

What it looks like currently

Here is a short recording in GIF:

4

As you see, the list item remains in its pressed state. How to fix this?

The overlay blocks all interactions beneath, I guess the list item springs back to normal after you close it. Not ideal, nor the big deal either

But it doesn’t, that’s the problem. Look, I’m showing this on the animation.

I had this problem many times. The only fix i found is to add after delay from while pressing to default state for a force returning.

Hey Nellya!

I got the idea, however I’m not finding a way to add that after delay.

Would you please elaborate?

Like this

1 Like

I see now why it didn’t work out for me.

You see, I use Material Design 3 Kit components (e.g. “Card”). And they have the “while pressing” effect already built-in, so I can’t really interfere and do that.

Instead, I’d need to create the card from scratch to include the initial state restoration.

Thank you!

P.S. Interestingly, since I’ve started using Material Design 3 Kit, I only reduce the number of components I include in my designs as I have to replace them with custom components that work more correctly. So this one is just one more reason why MD3K is more a toy, and not something ready for real applications.

Folks!

I’m picking one of Nellya’s answers as a solution. It involves manual state restoration with “after delay”. Yet, the question on how to achieve that more easily - is still open.

I would have added this text to where it should be - in the first posting, but forum rules don’t allow editing.

1 Like