base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[popups] Enable scroll lock on touch when modal

Open atomiks opened this issue 2 months ago • 4 comments

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

atomiks avatar Oct 30 '25 07:10 atomiks

vite-css-base-ui-example

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

pkg-pr-new[bot] avatar Oct 30 '25 07:10 pkg-pr-new[bot]

Bundle size report

Bundle Parsed size Gzip size
@base-ui-components/react ▼-106B(-0.03%) ▼-41B(-0.03%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

mui-bot avatar Oct 30 '25 07:10 mui-bot

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Oct 30 '25 07:10 netlify[bot]

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)

atomiks avatar Nov 12 '25 03:11 atomiks