Ignore clicks on scrollbars

[Rodeoclash]

Great plugin. One problem, clicking and dragging the scrollbar causes the document click event to fire. I know right? Who uses scrollbars and not the wheel...

I'm happy to PR this but wanted to discuss first how to handle it. It doesn't seem like theirs a way to nativly detect when a document click originates from a scrollbar without additional work measuring screen dimensions.

Thoughts?

[kentor]

When is that an issue? When you need to scroll to see the content in the dropdown?

[Rodeoclash]

Say I have a dropdown menu on a sticky header. It's possible to open that menu then expect to be able to scroll the page under the header without it closing the menu.

[Rodeoclash]

I can put together a video if that helps visualise what's going on.

[kentor]

Yes please. What OS/Browser are you using? Doesn't happen to me on OS X Yosemite, Chrome

[Rodeoclash]

I'm on Ubuntu / Chromium and see it, was reported on Safari / Yosemite I think. Could be Chrome / Yosemite.

Here's an example. You'll see I demonstrate the floating header /w content scrolling under it. Then it closing on mouse down on the scrollbar. Some examples of document click closing it (as it should) then the scrollbar closing it again.

https://youtu.be/rVA6F9hFgM4

[kentor]

Does not close the dropdown for me on Safari 9.

From google searching it seems like there's no spec whether clicking on the scroll bar should trigger a click event. And perhaps some browsers do and some browsers don't.

http://stackoverflow.com/questions/25349259/should-a-click-handler-be-run-when-clicking-on-a-scrollbar

https://bugs.chromium.org/p/chromium/issues/detail?id=6759 (issue with blurring of focused element, but could be the same underlying problem)

I guess we can see what solutions other people have come up with.

[Rodeoclash]

Ah edge cases huh. I'll discuss with the team here about what they want to do, perhaps we might be able to work around it. If we go ahead with fixing it, I'll put a PR together.

[levitomer]

Hi

I was introduced to this annoying issue today, I found that using offsetX together with clientWidth did the job and the solution is pretty straight forward:

if (e.offsetX <= e.target.clientWidth) { onClickOutsideEvent(e); }

Hope this helps someone 👍