Mobile: Drawer doesn't close with scrollable content and modal set to false

[agtseito]

I'm trying to implement a drawer with scrollable content, while also still being able to interact with outside elements.

When you have scrollable content in the drawer, and the modal prop set to false, you are unable to close the drawer by dragging it down.

Steps to reproduce:

1. Include scrollable content in drawer with overflow enabled (i.e. scrollable with inputs example)
2. Set modal to false in Drawer.Root
3. Open the drawer, and then attempt to close by dragging

Reproducing the issue:

https://github.com/emilkowalski/vaul/assets/150581217/5aadff95-9e73-4572-8b49-b0785fb40918

[xih]

@agtseito have you figured out how to include scrollable content with snapPoints as well as modal being false.

I have these in my drawer.root props

<Drawer.Root
      open={open}
      onClose={onClose}
      modal={false}
      snapPoints={[0.45, 0.95]}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      closeThreshold={0.1}
      fadeFromIndex={1}
    >

and I unfortunately can't get Scrollable to work.

Let me know if you figured something out!

[agtseito]

@agtseito have you figured out how to include scrollable content with snapPoints as well as modal being false.

I have these in my drawer.root props

<Drawer.Root
      open={open}
      onClose={onClose}
      modal={false}
      snapPoints={[0.45, 0.95]}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      closeThreshold={0.1}
      fadeFromIndex={1}
    >

and I unfortunately can't get Scrollable to work.

Let me know if you figured something out!

I haven't figured anything out unfortunately

[agtseito]

I found a workaround/solution by using react-remove-scroll

Simply just wrap your overflow content with the RemoveScroll component:

import { RemoveScroll } from 'react-remove-scroll'

<Drawer.Content>
      {/* this replaces the outer div from the scrollable example */}
    <RemoveScroll className="... overflow-auto">
      {/* your content that overflows here */}

    </RemoveScroll>
</Drawer.Content>

One caveat to this approach is that it disables all other scrollable content whilst the drawer is open. You can pass a shards prop with refs to the components you dont want to disable.

---

Background info on the problem

• When capturing the pointerevent of the Drawer.Content to trigger the drag, a pointercancel event is fired by the browser briefly after dragging
  • this is most likely due to the browser trying to pass control to the scroll element
• When modal is true, this isn't an issue because radix uses the react-remove-scroll library in the Overlay component (with the shards prop referencing the Content component)
  • I think the intention behind this was to just disable other scroll content while the dialog is open, but it also has the side effect of stopping the pointercancel event from firing (I'm not sure how)

@emilkowalski Not sure if to mark as closed, or maybe you have plans to integrate a solution into the project?

@xih

[apetta]

@agtseito This helped fix the scroll jank I was getting with scrollable content.

Reducing the scrollLockTimeout also made a big difference.

[dragonkhoi]

RemoveScroll works with no snap points. However, scrollable content with snapPoints and modal being false (as outlined below) still does not work for me.

@agtseito have you figured out how to include scrollable content with snapPoints as well as modal being false.

I have these in my drawer.root props

<Drawer.Root
      open={open}
      onClose={onClose}
      modal={false}
      snapPoints={[0.45, 0.95]}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      closeThreshold={0.1}
      fadeFromIndex={1}
    >

and I unfortunately can't get Scrollable to work.

Let me know if you figured something out!

[muhammadarsalanmanzoor]

scrolling issue happening on some IOS devices

[emilkowalski]

Should be fixed in #424