Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: prevent SfSidebar disableBodyScroll triggering on desktop #1027

Merged
merged 1 commit into from
May 20, 2022

Conversation

sethidden
Copy link
Contributor

As part of vuestorefront/storefront-ui#619
body-scroll-lock was added to SfSidebar.
If you look closely at
https://github.com/vuestorefront/storefront-ui/blob/d5b646a6344e0ab4f5dad214458662af7c8bbd57/packages/vue/src/components/organisms/SfSidebar/SfSidebar.vue#L146

you'll see that disableBodyScroll is called in a watcher on the "visible" prop.
hint: disableBodyScroll() just sets "overflow: hidden" on the HTML
document body, which makes the body unscrollable.
In this case that I'm fixing, it goes like:

The value passed to CategoryFilters's isVisible comes from
useUiState's isFilterSidebarOpen. This value is false by default.

Clicking the "clear" or "apply" button in the filters emits the
"close" event from CategoryFilters - if you look at category.vue that
just calls "toggleFilterSidebar". This will set isVisible to TRUE

Changing isVisible to true triggers SfSidebar's watcher, even though the SfSidebar
it is not currently visible (it should be visible only on mobile)

This in turn runs disableBodyLock() and prevents scrolling

@sethidden sethidden force-pushed the bugfix/M2-571-filter-scrolling branch from 313bb60 to 8548695 Compare May 19, 2022 13:39
@bartoszherba
Copy link
Collaborator

@sethidden As long as it works.... :)

@sethidden sethidden merged commit c9c7716 into develop May 20, 2022
@sethidden sethidden deleted the bugfix/M2-571-filter-scrolling branch May 20, 2022 09:06
@Frodigo Frodigo added this to the 1.0.0-rc.8 milestone May 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants