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

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

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.