Skip to main content
Onkel_Tem
Nov 11, 2024 8:04 PM UTC
Solved

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?

This topic has been closed for replies.
Nellya
NellyaSolution
Power Member
Nov 13, 2024 10:55 AM UTC

Like this

7 replies

Pavel_Kiselev
Power Member
Nov 11, 2024 10:29 PM UTC

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

Onkel_Tem
Onkel_TemAuthor
Nov 12, 2024 12:27 AM UTC

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

Nellya
Power Member
Nov 12, 2024 5:14 AM UTC

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.

Onkel_Tem
Onkel_TemAuthor
Nov 13, 2024 10:09 AM UTC

Hey Nellya!

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

Would you please elaborate?

Nellya
NellyaSolution
Power Member
Nov 13, 2024 10:55 AM UTC
Onkel_Tem
Onkel_TemAuthor
Nov 13, 2024 11:06 AM UTC

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.

Onkel_Tem
Onkel_TemAuthor
Nov 13, 2024 11:13 AM UTC

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.