radix-ui / themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
https://radix-ui.com/themes
MIT License
5.67k stars 204 forks source link

[Dialog] Issue: touchmove event prevents scrolling on touchdevices #544

Closed railstride closed 4 months ago

railstride commented 4 months ago

Hey all,

I currently working on a Component using the Dialog Component. I noticed that as soon as the dialog gets opened a touchmove event gets introduced from dialog.js. This disables that one can scroll on touchdevices.

Any ideas / hints how I can make scrolling work on touchdevices?

image

// Dialog.js

…
function be(l, e) {
    (0,
    react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(()=>{
        var d;
        if (!e || !l)
            return;
        let t = (0,
        _utils_disposables_js__WEBPACK_IMPORTED_MODULE_1__.disposables)();
        function o(n, i, m) {
            let a = n.style.getPropertyValue(i);
            return Object.assign(n.style, {
                [i]: m
            }),
            t.add(()=>{
                Object.assign(n.style, {
                    [i]: a
                })
            }
            )
        }
        let r = l.documentElement
          , p = ((d = l.defaultView) != null ? d : window).innerWidth - r.clientWidth;
        if (o(r, "overflow", "hidden"),
        p > 0) {
            let n = r.clientWidth - r.offsetWidth
              , i = p - n;
            o(r, "paddingRight", `${i}px`)
        }
        if ((0,

        // 
        // ↓ this one here is highlighted in dialog.js:27
        // 

        _utils_platform_js__WEBPACK_IMPORTED_MODULE_2__.isIOS)()) {
            t.addEventListener(l, "touchmove", i=>{
                i.preventDefault()
            }
            , {
                passive: !1
            });
            let n = window.pageYOffset;
            t.add(()=>window.scrollTo(0, n))
        }
        return t.dispose
    }
    , [l, e])
}
…
vladmoroz commented 4 months ago

You can pass modal={false} to Dialog.Root if you are trying to create a non-modal dialog using the @radix-ui/react-dialog primitive