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

Scroll on touchscreen not working when used in atlaskit/modal #3661

Closed
FabioWanner opened this issue Jul 2, 2019 · 2 comments
Closed

Scroll on touchscreen not working when used in atlaskit/modal #3661

FabioWanner opened this issue Jul 2, 2019 · 2 comments

Comments

@FabioWanner
Copy link

I'm trying to use react-select in a atlaskit/modal (as described in the documentation react-select/portaling). Everyting works fine except scrolling the list of options with finger or pen on a touch screen.

Codepen Example

Versions used:
"react-select": "3.0.4"
"@atlaskit/modal-dialog": "10.0.6"

@slofurno
Copy link

slofurno commented Aug 24, 2019

Had the same issue, looks like atlaskit was actively blocking touch scroll events from the body when the modal was open

https://github.com/jossmac/react-scrolllock#touchscrollable

you can pass a custom menu component into react select to fix this

https://react-select.com/components

const Menu = props => (
  <components.Menu {...props}>
    <TouchScrollable>
      {props.children}
    </TouchScrollable>
  </components.Menu>
)

you will need v4 of react-scrolllock for this

@FabioWanner
Copy link
Author

Thank you very much! This solves the problem!

Here the complete Codepen Example for anyone interested.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants