Click (touch) events blocked for a short time after swiping

[kubagp1]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-react-default-forked-u7yty5?file=%2Fsrc%2FApp.jsx

Bug description

When clicking somewhere quickly after swiping to change a slide, click events on elements not related to the swiper are not registered. This only happens when using touch input (emulated or real).

2023-02-07.00-53-02.mp4

NOTE: I opened the same issue (#6355) once, but after posting tried few things out in the codesanbox like changing Swiper version to 7. When @nolimits4web reviewed my previous issue I forgot to revert those changes and my issue was closed (due to version 7 being used) without a solution or fix. I apologize for my mistake. The issue is still valid.

Expected Behavior

Click events on external elements should work as usual.

Actual Behavior

Click events on external are not triggered when clicking on them shortly after swiping the swiper.

Swiper version

9.4.0

Platform/Target and Browser Versions

Chrome 114.0.5735.110 (Windows 10)

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[kubagp1]

Additional information: i used monitorEvents() to check what events are passed to the external element. Normally it looks like this:

but when i click (touch) quickly after swiping the swiper some are missing:

All of the events after touchEnd are not there.

[kubagp1]

Additional information: based on my debugging attempts, my touch gets captured by #document.touchstart (that's what Chrome Devtools says after breaking on touch event) and runs function dummyEventListener() {}. I guess(!) that's what stops propagation.

[kubagp1]

This problem doesn't occur with cssMode: true, but cssMode doesn't support many important features.

[iharshspatel]

@kubagp1 did you find any workaround for this?

[kubagp1]

@kubagp1 did you find any workaround for this?

Nope. I'm using a different carousel library until this is fixed.

[nolimits4web]

Not a Swiper bug, it is browser's bug or feature related to handling touch-action CSS prop. It can be replicated on any simple element such as <div style="touch-action: pan-y; height: 200px; width: 100%; background-color: blue;">Test</div>

[kubagp1]

Then why it's only present in Swiper? Any other library i tested didn't have this behaviour.