[feature]: useScrollLock doesn't have an option to reset on unmount

[MichaelHeinzman]

Is your feature request related to a problem? Please describe. I'm utilizing the Dialog component with venia-ui to display a loading modal on the screen for the user after placing an order. However the dialog uses useScrollLock and it sets the scroll lock to true when the modal is open. We navigate away from the page when the modal is displayed so I think that causes the useScrollLock to stay activated.

Describe the solution you'd like On unmount, I would like useScrollLock to set the scroll lock to false, in cases where the modal doesn't have time to have it's isOpen updated.

export const useScrollLock = locked => {
    useLayoutEffect(() => {
        if (!globalThis.document) return;

        document.documentElement.dataset.scrollLock = locked || '';

        return () => {
          // Logic to set to false on unmount
          document.documentElement.dataset.scrollLock = false; 
        }
    }, [locked]);
};

Describe alternatives you've considered I would say our problem is in our use case, so setting the scroll lock to false before we navigate away would be ideal, it's just I was thinking this should be apart of the hook itself.

It could be this was already implemented, since we are using an older version of venia-ui.

Please let us know what packages this feature is in regards to:

• [8.0.0 ] venia-ui
• [ 12.5.1] peregrine

[m2-assistant[bot]]

Hi @MichaelHeinzman. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information. Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[glo11372]

Hi, After applying your changes in ‘useScrollLock.js’ file. Below result we are getting, if this is the same expectation, then we will continue with applying this enhancement else if not the expectation ,then please share a video for the same, for more understanding.

https://github.com/magento/pwa-studio/assets/143005735/a953f679-daa6-497e-ab34-168a1cf523b1

[glo82145]

https://github.com/adobe export issue to Jira project PWA

[glo82145]

@adobe export issue to Jira project PWA

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-3279 is successfully created for this GitHub issue.

[glo82145]

As We have waited for more than 14 days still we have not received any update , hence we are closing this ticket. Please feel free to reopen this ticket in case of any update.