Interactive elements are activated after dragging in <sl-carousel mouse-dragging>

[alexnozer]

Describe the bug

When using cards with interactive elements in the mouse-dragging carousel, these interactive elements are activated after the drag ends when the mouse key is released.

There is a fairly common pattern where the clickable area of a link is stretched using a pseudo element to make the entire card interactive. Heydon Pickering writes about this. With this approach, immediately after dragging the carousel to view the cards, the link will be clicked and a new page will load.

To Reproduce

Steps to reproduce the behavior:

1. Go to the CodePen demo
2. Click on any carousel card and try to drag it
3. Release the mouse button to finish dragging
4. A hidden paragraph with the card ID is displayed below the carousel *

* In the demo, this happens thanks to fragments href="#card1" and the :target pseudo class. In the real case, it will activate the link and go to a new page.

Demo

There are CodePen demo with a minimal reproduction.

Screencast

screencast.mp4

Browser / OS

• OS: Windows
• Browser: Chrome 129, Firefox 131