[BUG] Clicking on/Click dragging the root scrollbar closes SfSidebar

[kingrea]

Describe the bug
If you have an SfSidebar open on a page, then attempt to use the pages scrollbar (not a scrollbar on SfSidebar) - it will close the sidebar.

How to reproduce
Steps to reproduce the behavior:

1. Go to any website that uses vue storefront UI and content high enough that creates a verticle scroll
2. Click on an element that opens a sidebar with non-persistence
3. Click, or click and drag the scrollbar
4. The sidebar will close

or if you want to look at it in action of the docs:

1. https://docs.storefrontui.io/?path=/docs/components-organisms-sidebar--common
2. (in chrome) right click the sidebar (not the overlay) and inspect element
3. find the div with id="root" and add 'overflow: scroll, height: 1000px'
4. Attempt to use the root elements scrollbar

Expected behavior
The menu should not close

Actual behavior
The menu closes

Devices (please complete the following information):

• Device: [Desktop]
• OS: [Windows]
• Browser: [chrome]

Additional context
The solution is probably close to what I found in this post.

It's an edge case. Scrollbars are technically outside of the clients width. However since the clickOutside directive (utilities/directives/click-outside/click-outside-directive.js) doesn't check to see if the click is happening outside of the client width - this is expected behaviour.
It needs something like:
if (e.offsetX <= e.target.clientWidth) { onClickOutsideEvent(e); }
to check if the click event is outside of the documents scope.

┆Issue is synchronized with this Jira Task by Unito

[AdamPawlinski]

Hi @kingrea, thanks for this issue. Would you like to take this task?

[shatanov]

Hi @AdamPawlinski, maybe I can take this task?

[shatanov]

Hi @AdamPawlinski, maybe I can take this task?

@FRSgit

[Szymon-dziewonski]

Hey @shatanov feel free to take this task, it will be highly welcomed :)

[shatanov]

Hey @shatanov feel free to take this task, it will be highly welcomed :)

Ok) pls, assign this task to me

[shatanov]

Hey @shatanov feel free to take this task, it will be highly welcomed :)

Ok) @Szymon-dziewonski pls, assign this task to me

[Szymon-dziewonski]

@shatanov you are assigned, have fun and good luck :)

[FRSgit]

If you have any questions feel free to reach us on discord!

[shatanov]

If you have any questions feel free to reach us on discord!

Yep, I have on discord server, but I haven`t conributor status there