Interacting with a dropdown within the slider starts drag and drop behaviour

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.

https://www.embla-carousel.com

MIT License

6.02k stars 180 forks source link

Interacting with a dropdown within the slider starts drag and drop behaviour #394

Closed ChristianHoffmannS2 closed 1 year ago

ChristianHoffmannS2 commented 1 year ago

Bug is related to

[x] embla-carousel (core package)

Embla Carousel version

v7.0.0

Describe the bug

When interacting with a dropdown element inside of the slides, safari will be locked into free-drag state

CodeSandbox

- The link to a CodeSandbox that demonstrates the bug clearly.

Steps to reproduce

Go to the sandbox with a safari browser
Click on the dropdown and make a selection
Move the mouse without clicking anything
See error

Expected behavior

Interacting with input elements should not be an interaction with the slider

Additional context

This might effect mobile safari as well. This might be related to drag- and touch events.
Behaviour might be fixed with a stopPropagation at the right place
Its unclear why this only happens when using Safari

davidjerleke commented 1 year ago

Hi @ChristianHoffmannS2,

Thank you for your bug report. I can’t find a dropdown in the provided CodeSandbox? Did you share the wrong link?

Best, David

davidjerleke commented 1 year ago

Hi again @ChristianHoffmannS2,

Not to rush you or anything, but have you seen my response? Do you want to pursue this?

Best, David

ChristianHoffmannS2 commented 1 year ago

Hi again @ChristianHoffmannS2,

Not to rush you or anything, but have you seen my response? Do you want to pursue this?

Best, David

Hi David,

I am sorry that I missed out your response!

Does this include it?

https://codesandbox.io/s/embla-carousel-dragfree-react-forked-e3mvkh?file=/src/js/EmblaCarousel.js

davidjerleke commented 1 year ago

Hi @ChristianHoffmannS2,

Thanks. That’s the CodeSandbox 🙂. I can confirm that this is a bug. Scanning the code, it seems to be a simple mistake because the select name is missing in the list of elements that shouldn’t trigger dragging.

I can create a CodeSandbox an add select to that list if you wouldn’t mind testing it?

Kindly, David

ChristianHoffmannS2 commented 1 year ago

Hi @davidjerleke,

thanks. That would be good to test against :)

davidjerleke commented 1 year ago

Sorry @ChristianHoffmannS2,

I’ve must have been really tired when writing my previous comment. The node type SELECT is in that list. I will have to investigate this a bit more to understand why this is happening.

I will let you know when I have something.

Best, David

ChristianHoffmannS2 commented 1 year ago

All good @davidjerleke .

I didn't payed enough attention neither :)

davidjerleke commented 1 year ago

Hi @ChristianHoffmannS2,

This bug has been fixed in v7.0.7. Give it a go if you like. Thanks for creating the bug report 👍.

Cheers, David