[popups] Enable scroll lock on touch when modal
Fixes #3098
Since touchmove is used, swiping still allows swipe-outside-to-dismiss to work, so the end result is mostly identical except with a slightly increased dead zone where scroll doesn't happen.
This enables use cases like a popover that covers the whole screen (to use the anchoring behavior over Dialog) where the background scroll remains locked
pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3100
pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3100
commit: c4bf638
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @base-ui-components/react | ▼-106B(-0.03%) | ▼-41B(-0.03%) |
Check out the code infra dashboard for more information about this PR.
Deploy Preview for base-ui ready!
| Name | Link |
|---|---|
| Latest commit | c4bf638df0856632ca3ea0114bac1bb71e9a4e6c |
| Latest deploy log | https://app.netlify.com/projects/base-ui/deploys/691401ffe18d9f00084f05ba |
| Deploy Preview | https://deploy-preview-3100--base-ui.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
Issue: on iOS, when scroll is activated (navbar expanded), this prevents scroll when swiping to dismiss
For the Popover use case, it seems like the structure in https://github.com/mui/base-ui/pull/3183 would work better (across all platforms/browsers)