[Help]: Class is-dragging applied before dragging start

[meirroth]

Summary

Not sure if this qualifies as a bug so opening discussion.

The class is-dragging from the ClassNames plugin is applied to the root element on pointerDown

embla-carousel/packages/embla-carousel-class-names/src/components/ClassNames.ts

Line 23 in 09da7a6

const draggingEvents: EmblaEventType[] = ['pointerDown', 'pointerUp']

It would make more sense to apply it on drag start as supposed to pointerDown so that the class is not applied on a simple click.

This is causing an issue for my implementation where I need to disable pointer events on slides while dragging to prevent unwanted slide hover behavior, so using the class is-dragging from the ClassNames` plugin to disable pointer events while dragging is preventing slide clicks.

See minimal reproduction: https://stackblitz.com/edit/github-it9kus?file=app.vue

Notice how everything works as expected WHILE dragging, but clicking a slide doesn't do anything, I would expect it to open the link.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://stackblitz.com/edit/github-it9kus?file=app.vue

[davidjerleke]

@meirroth I agree that the naming is unfortunate. The purpose of the dragging: is-dragging is actually pointerDown: 'is-pointer-down'. It's used to style the pointer on desktops, cursor: grabbing; is often used for this:

I'm open to renaming this in the next major version. For example: pointerDown would be more accurate. In your case, you can solve it like this:

let isDragging = false

emblaApi.on('scroll', (emblaApi) => {
  isDragging = emblaApi.internalEngine().dragHandler.pointerDown();
});


emblaApi.on('pointerUp', () => {
  isDragging = false
})

Best,
David

[meirroth]

@davidjerleke That makes sense! And thanks, your suggestion worked smoothly: https://stackblitz.com/edit/github-it9kus-2yqksu?file=app.vue 😃

I think remaining the class makes sense. What are your thoughts on adding a new class is-dragging that works like you suggested above, so we'll end up with these two:
is-dragging: Applied while the carousel is being dragged. (New behavior)
is-pointer-down: Applied while pointer is down on the carousel. (Previously is-dragging)

[davidjerleke]

@meirroth yes, that makes sense. So it will be changed into this:

export const defaultOptions: OptionsType = {
  active: true,
  breakpoints: {},
  snapped: 'is-snapped',
  inView: 'is-in-view',
  pointerDown: 'is-pointer-down', // Applied while pointer is down on the carousel. (Previously is-dragging)
  dragging: 'is-dragging', // Applied while the carousel is being dragged. (New behaviour)
  draggable: 'is-draggable',
}

[meirroth]

@davidjerleke Yes. I can give this a try implementing if that's ok.

[davidjerleke]

@meirroth sure. But heads up: It's a breaking change because it alters current behaviour. So it can only be released in the next major version which is v9.

[meirroth]

@davidjerleke no worries! I'm using the workaround you shared above, which works perfectly.