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

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

Closed
MichaelHeinzman opened this issue Mar 4, 2024 · 6 comments
Closed
Assignees
Labels
enhancement New feature or request Progress: done

Comments

@MichaelHeinzman
Copy link

MichaelHeinzman commented Mar 4, 2024

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
@MichaelHeinzman MichaelHeinzman added the enhancement New feature or request label Mar 4, 2024
Copy link

m2-assistant bot commented Mar 4, 2024

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 glo11372 self-assigned this Mar 22, 2024
@glo11372
Copy link
Contributor

glo11372 commented Apr 3, 2024

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.

useScrollLock.mp4

@glo82145
Copy link
Collaborator

glo82145 commented May 9, 2024

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

@glo82145
Copy link
Collaborator

glo82145 commented May 9, 2024

@adobe export issue to Jira project PWA

@github-jira-sync-bot
Copy link

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

@glo82145
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Progress: done
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants