payload icon indicating copy to clipboard operation
payload copied to clipboard

Scroll not working anymore on iPhone after sidebar close

Open n0mad-d3v opened this issue 1 year ago • 0 comments

Describe the Bug

Hi 👋 dear Payload team,

I'm opening this ticket for a not-so-important-but-quite-boring issue with the admin:

Issue

After changing the page from the sidebar (and closing it), the scroll stays locked on iPhone. We tested this issue on other devices (iPad, MacOS, Windows, Android) and it's fine, it's really iOS only. But it seems that all our clients are accessing their admin via their iPhone 😜

Workaround

If the user refreshed the page, then the scroll is

What I understood

I searched a bit already but not yet sure where it's coming from. I think it comes from the fact that the scroll is locked on purpose when opening the sidebar here: -> https://github.com/payloadcms/payload/blob/877b89962ec15f810e31325421cfd1bfa3b66cbe/packages/ui/src/elements/Nav/context.tsx#L78

And it seems that the disableBodyScroll method is not working properly? I saw it comes from this package https://github.com/willmcpo/body-scroll-lock but I am not sure it's maintained anymore.

Do we really need the scroll to be locked when the sidebar is open?

What I didn't understood

I tried to fix that on my side but without any luck for now. Let me know if there is anything I can do!

Reproduction

The issue does happen on a new instance, created with npx create-payload-app

I put a reproduction repo here: https://github.com/latte-macchiat-io/payloadcms-scroll-issue but it's really the state after the execution of the CLI.

You can also access the project here if it's easier for you to test with an iPhone:

Thanks a lot for your help, And have a wonderful day ☀️

Link to the code that reproduces this issue

https://github.com/latte-macchiat-io/payloadcms-scroll-issue

Reproduction Steps

  • Browser Admin with Safari on an iPhone
  • Open the sidebar
  • Click on one item of the sidebar (example: Users)
  • Close the sidebar (not closed automatically)
  • Scroll vertically or horizontally => NOK, the scroll is still locked.

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.22
  pnpm: 9.7.1
Relevant Packages:
  payload: 3.2.2
  next: 15.0.3
  @payloadcms/email-nodemailer: 3.2.2
  @payloadcms/graphql: 3.2.2
  @payloadcms/next/utilities: 3.2.2
  @payloadcms/payload-cloud: 3.2.2
  @payloadcms/richtext-lexical: 3.2.2
  @payloadcms/translations: 3.2.2
  @payloadcms/ui/shared: 3.2.2
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106

n0mad-d3v avatar Dec 02 '24 17:12 n0mad-d3v