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

Dropdowns/Combobox: Cannot scroll via touch when housed in Modal #10993

Closed
micahgodbolt opened this issue Oct 30, 2019 · 4 comments
Closed

Dropdowns/Combobox: Cannot scroll via touch when housed in Modal #10993

micahgodbolt opened this issue Oct 30, 2019 · 4 comments

Comments

@micahgodbolt
Copy link
Member

Due to the disableBodyScroll called in Overlay, any component housed in a modal/Dialog will have trouble scrolling via touch.

Check out this example. Wheel scroll works, but change to mobile device in inspector and scroll won't work.

Click on "fix scroll", which calls enableBodyScroll and you'll be able to scroll again.

not 100% sure how we want to resolve this, as i'm sure the functionality was well intentioned.

https://codepen.io/micahgodbolt/pen/NWWwKKM?editors=0010

@joschect
Copy link
Contributor

@micahgodbolt this is the same problem as #8855 Both Katherine and I spent a fair amount of time investigating it and as far as we could tell there is no way to fix this without reverting the change that introduced it in the first place. At this point I think we should consider rolling back the change and allowing background scroll on ios. That seems to be the lesser of two evils in this case.

@maxwellred
Copy link
Contributor

maxwellred commented Oct 30, 2019

@micahgodbolt I've been coordinating with @joschect and @aneeshack4 on this #10982 issue and I feel it might be related since Panel does not have touch scrolling either. I've noticed that when I change data-is-scrollable to false in the div surrounding the Panel's content (Panel.base.tsx, line below), touch scrolling works on the locally spun up site's NavBar at mobile size but doesnt work on Panel examples (and switches back and forth as you change true and false). I'm thinking and currently testing to see if findScrollableParent(...) in scroll.ts is grabbing the wrong parent or getting fed the wrong starting element.

<div ref={this._allowScrollOnPanel} className={_classNames.scrollableContent} data-is-scrollable={true}>

@micahgodbolt
Copy link
Member Author

@joschect i am pretty certain this is a different issue. This one is related to the disableBodyScroll function that is called when Overlays are created. disableBodyScroll adds some CSS to the body to hide all overflow (that's fine) but it also disables touchmove event (not good here).

I'd be curious what effect removing the touchmove restriction would have, and if there was a less intrusive way to solve the scroll problem

@micahgodbolt
Copy link
Member Author

ok. updated #8855 with my findings. I can close this one down.

@microsoft microsoft locked as resolved and limited conversation to collaborators Nov 30, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants