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

Dismissing a Dialog that was triggered by a menu item on a mobile device breaks the scrolling of the page that was under the Dialog #3282

Closed
JustinShillingford opened this issue Jun 29, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@JustinShillingford
Copy link

🐛 Bug Report

After dismissing a <Dialog> that was triggered with a<Menu> item (like in the Spectrum docs @ https://react-spectrum.adobe.com/react-spectrum/DialogContainer.html#dialog-triggered-by-a-menu-item) on mobile, scrolling on the page that was underneath the <Dialog> before it was dismissed is broken. Broken ranges from completely non-functional to incredibly inconsistent, but I am consistently able to reproduce this issue where scrolling does not work as expected. I'm still able to interact with any elements that were underneath the <Dialog> like buttons but scrolling is definitely broken. I tested it on my iPhone 12 Pro and on a Chrome simulated iPhone 12 Pro and was able to see this issue on both with the app I'm working on and on the actual example of this functionality on the linked Spectrum docs page above.

🤔 Expected Behavior

After dismissing the <Dialog> on mobile, the page that was underneath it should be able to scroll as normal.

😯 Current Behavior

After dismissing the <Dialog> on mobile, the page that was underneath it will either no longer scroll or (only after a lot of aggressive back and forth swiping) will scroll unreliably.

💁 Possible Solution

Not sure, but I did notice on my iPhone 12 Pro that when I trigger the <Dialog> on the Spectrum docs, the page scrolls all the way back to the top on its own before the <Dialog> is presented. Maybe there's something there? 🤷🏽‍♂️

🔦 Context

I'm trying to present the set of Legal notices for the product on our mobile devices. Presenting a <Dialog> with these notices was not a problem on desktop but this issue is preventing this very important piece from being included on mobile. There's only one item in the <Menu> that triggers a <Dialog> (this one) and the other <Menu> items still work as expected.

💻 Code Sample

I just copied the code from the same Spectrum docs linked above into the sandbox below

https://codesandbox.io/s/brave-brattain-w4ort6

🌍 Your Environment

Software Version(s)
react-spectrum 3.13.0
Browser Chrome (desktop), Safari (mobile)
Operating System macOS Big Sur (desktop), iOS 15.5 (mobile)

🧢 Your Company/Team

Adobe (Adobe Acrobat Sign Integrations)

🕷 Tracking Issue (optional)

N/A

@JustinShillingford
Copy link
Author

JustinShillingford commented Jun 29, 2022

Here's a gif of the behavior on the Chrome simulated iPhone 12 Pro environment (so that the "taps" can be visualized as I try to scroll to no avail):

BrokenScrollingDemo

@JustinShillingford
Copy link
Author

Also, if you need to reach out to me it's probably better to reach out to my Adobe account: [email protected]

@snowystinger
Copy link
Member

I can reproduce it on my iPhone 13 Pro iOS 15.5

@snowystinger
Copy link
Member

I cannot reproduce this on the latest. Please confirm, if it's still an issue, we can reopen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Completed
Development

No branches or pull requests

2 participants