search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.2k stars 878 forks source link

md-ripple: does not disappear after losing focus/active with swiperjs #5575

Open kkachniarz220 opened 5 months ago

kkachniarz220 commented 5 months ago

What is affected?

Component

Description

screen-capture (10).webm

Should the ripple be visible permanently after touch?

Reproduction

Use ripple in some scrollable element

Workaround

.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.4.0

Browser/OS/Node environment

Chrome 123.0.6312.106 (Official Build) (64-bit) Windows 11 npm 10.2.3 node 20.10.0

asyncLiz commented 5 months ago

Can you provide a minimal reproduction using something like https://lit.dev/playground?

kkachniarz220 commented 5 months ago

Hmm, seems like the problem occurs with SwiperJS.

Playground

https://github.com/material-components/material-web/assets/50884231/d970052a-f3a4-4a3c-a636-8a696190a5a6

Maybe some ideas why is this happening?

image

vanilla - events emitted in vanilla css solution swiperjs - events emitted in swiperjs solution

asyncLiz commented 5 months ago

It looks like swiperjs is intercepting the pointercancel event. The browser will dispatch that event when it detects that a user is swiping instead of tapping. When this happens, we end the ripple's animation early.

State is getting mismatched because the pointerup event's pointerId doesn't match the pointerenter's pointerId here.

I don't think I'll be able to take a look at swiperjs compatibility unfortunately. Our ripple.shouldReactToEvent() may need tweaks to support swiperjs while also handling the vanilla use case of tapping with multiple pointers.