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

[kkachniarz220]

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]

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

[kkachniarz220]

Hmm, seems like the problem occurs with SwiperJS.

Playground

2024-04-10.mp4

Maybe some ideas why is this happening?

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

[asyncLiz]

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.