Ignore clicks on scrollbars about react-click-outside HOT 8 CLOSED

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 👍

from react-click-outside.

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

from react-click-outside.

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.

from react-click-outside.

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

from react-click-outside.

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

from react-click-outside.

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

from react-click-outside.

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.

from react-click-outside.

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.

from react-click-outside.