Skip to content

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.

4 participants