Unable to close drawer by dragging from within scroll container.

[joncoronel]

Noticed that I'm unable to close the drawer by swiping it away from within any scroll container in the drawer.

In the scroll example at https://vaul-base.vercel.app/examples, on mobile, if you try to drag down from within the scroll container, the drawer slightly moves down but then pops back up.

That issue does not occur in the vaul example used in https://vaul.emilkowal.ski/default#scrollable.

Not exactly sure what would cause that? I've tried even using the same code for both but just importing from the respective package since they share the same api but issue still occurs so it doesn't seem to come from the any differences to how each example implements the scroll within the drawer.

[green-mint]

+1 @joncoronel were you able to figure out a fix?

[weepaho3]

@joncoronel @green-mint This issue doesn’t occur for me. On which device and browser are you seeing it?

[joncoronel]

@joncoronel @green-mint This issue doesn’t occur for me. On which device and browser are you seeing it?

Have the issue on android chrome.

[weepaho3]

@joncoronel Ah, I see. I'll take a look!

[weepaho3]

@joncoronel It seems that Vaul relies entirely on touch-action: none.

[data-vaul-drawer] {
  touch-action: none;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

However, in vaul-base, this is not being inherited correctly or is being overridden somewhere. I haven't been able to pinpoint exactly where this is happening or what is responsible for it. At the very least, the content elements of the drawer (e.g paragraphs ) have touch-action: auto applied to them, which leads to this bug.

@borabaloglu
I believe we shouldn't rely on reliable inheritance here and instead handle this directly in the root via JS. That would be significantly more robust. If you’d like, I can open a PR to fix this.

 React.useEffect(() => {
    if (!isOpen) return

    let element: HTMLDivElement | null = null

    function onTouchMove(e: TouchEvent) {
      if (isAllowedToDrag.current) {
        e.preventDefault()
      }
    }

    const id = requestAnimationFrame(() => {
      element = drawerRef.current
      if (element) {
        element.addEventListener("touchmove", onTouchMove, { passive: false })
      }
    })

    return () => {
      cancelAnimationFrame(id)
      if (element) {
        element.removeEventListener("touchmove", onTouchMove)
      }
    }
  }, [isOpen])

You can test this change here: https://vaul-base-www.vercel.app/examples