Scrollable content cannot dismiss

[Sovai]

The drawer with scrollable content cannot be dismissed. pls see the code below

<template>
  <DrawerRoot should-scale-background>
    <DrawerTrigger
      class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-app-positive shadow-sm ring-1 ring-inset ring-app-positive hover:bg-app-positive"
    >
      Open Drawer
    </DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed bg-dark-primary/50 inset-0" />
      <DrawerContent
        class="bg-light-primary flex flex-col fixed bottom-0 left-0 right-0 max-h-[96%] rounded-t-[10px]"
      >
        <div
          class="max-w-md w-full mx-auto flex flex-col overflow-auto p-4 rounded-t-[10px]"
        >
          <input class="border border-gray-400 my-8" placeholder="Input" />
          <p>
            But I must explain to you how all this mistaken idea of denouncing
            pleasure and praising pain was born and I will give you a complete
            account of the system, and expound the actual teachings of the great
            explorer of the truth, the master-builder of human happiness. No one
            rejects, dislikes, or avoids pleasure itself, because it is
            pleasure, but because those who do not know how to pursue pleasure
            rationally encounter consequences that are extremely painful. Nor
            again is there anyone who loves or pursues or desires to obtain pain
            of itself, because it is pain, but because occasionally
            circumstances occur in which toil and pain can procure him some
            great pleasure. To take a trivial example, which of us ever
            undertakes laborious physical exercise, except to obtain some
            advantage from it? But who has any right to find fault with a man
            who chooses to enjoy a pleasure that has no annoying consequences,
            or one who avoids a pain that produces no resultant pleasure?
          </p>
          <input class="border border-gray-400 my-8" placeholder="Input" />
          <p>
            On the other hand, we denounce with righteous indignation and
            dislike men who are so beguiled and demoralized by the charms of
            pleasure of the moment, so blinded by desire, that they cannot
            foresee the pain and trouble that are bound to ensue; and equal
            blame belongs to those who fail in their duty through weakness of
            will, which is the same as saying through shrinking from toil and
            pain. These cases are perfectly simple and easy to distinguish. In a
            free hour, when our power of choice is untrammelled and when nothing
            prevents our being able to do what we like best, every pleasure is
            to be welcomed and every pain avoided. But in certain circumstances
            and owing to the claims of duty or the obligations of business it
            will frequently occur that pleasures have to be repudiated and
            annoyances accepted. The wise man therefore always holds in these
            matters to this principle of selection: he rejects pleasures to
            secure other greater pleasures, or else he endures pains to avoid
            worse pains.
          </p>
          <input class="border border-gray-400 my-8" placeholder="Input" />
        </div>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
<script setup>
import {
  DrawerContent,
  DrawerOverlay,
  DrawerPortal,
  DrawerRoot,
  DrawerTrigger,
} from "vaul-vue";


</script>

[zaosoula]

+1

[hiclosecom]

+1

[zernonia]

Upstream issue https://github.com/emilkowalski/vaul/issues/281

[genius192x]

@zernonia hi, maybe this is solution https://github.com/emilkowalski/vaul/issues/281#issuecomment-2301503046 it is not the best one, but at least prevent strange things

[anbraten]

From a short check those lines from the upstream code: https://github.com/emilkowalski/vaul/blob/main/src/index.tsx#L577-L600

seem to be missing:

https://github.com/radix-vue/vaul-vue/blob/main/packages/vaul-vue/src/controls.ts#L544-L560

which might be related to the scrolling issues I've notice when comparing /test/scrollable-with-inputs

[mary-ext]

Is this actually an upstream issue? Vaul's docs has an example on scrollable content and it seems to be fine, I just can't seem to make the same happen with this Vue port (Android 14; Chrome 130)

Not sure if their docs has an up-to-date version of the library or not.

[SiiLuu]

Hi any news with this bug ? Personally, the solution of using data-vaul-no-drag also causes unwanted behavior during the first drags.

[nextifier]

Has anyone come up with a solution? The problem occurs only when we have "overflow-*" to the DrawerContent or its children, and happens only on touch devices. In original Shadcn UI website, they use Drawer for the menu with scrollable content, and that works fine.

[paro-paro]

Is this issue addressed in the latest release?

[mforstme]

+1

[brolnickij]

+1

[MickL]

Guys instead of spamming useless +1 you should upvote the issue, or may open a PR, but this adds nothing except for spam.

Anyway, this issue makes vaul-vue kinda useless. My drawer comes from the side and has scrollable content. With scrollable content either the content cant be scrolled if overflow-y-auto is added to DrawerContent OR the content can be scrolled but drawer cant be closed.

overflow-y: auto on DrawerContent:

overflow-y: auto on child:

[MickL]

Hey @harkor @zernonia thanks for the PR! However, doesnt this just set the default of allowedToDrag to false, or am I overseeing something?

• I think in my example (drawer comes from the side) the drawer should be draggable horizontally, but scrollable vertically
• In the other case (drawer comes from bottom), the drawer could be closable if content is scrolled all the way up, otherwise not react.

[mary-ext]

Am I misunderstanding what the original issue was about? because here's a StackBlitz example using the latest version where I can still reproduce it. https://stackblitz.com/edit/vitejs-vite-1xdy1r4h?file=src%2FApp.vue

I've tested with Chrome 134 on Android 15.

[nextifier]

I don't think this issue is fixed.

https://ui.shadcn.com/ https://www.shadcn-vue.com/

Just open the original shadcn website and shadcn-vue website in mobile version. Open the menu. Both of them use Drawer to display menu in mobile version.

But the shadcn-vue version has 2 problems:

1. It will not close the Drawer when swiped to bottom if the DrawerContent has overflow.
2. When scrollable DrawerContent is scrolled up or down, there is a translate-y happening on the Drawer component, making it keep moving when we scroll up / down the content.

The original shadcn menu drawer doesn't have those 2 issues.

(I found a hacky trick to fix the problem 1 by adding scroll listener to the DrawerContent that check if the drawer content position is at the top or not, if at the top, then apply class "touch-pan-down" so it can only swiped up, but swiped bottom will not scroll the content, rather close the drawer.)

[MickL]

Can this be reopened please? @zernonia

This is with latest 0.4.1:

[MickL]

Workaround that I do for now using VueUse:

const isOpen = ref(false);
const contentRef = ref(null);
const { isSwiping, direction } = useSwipe(contentRef);

watch(isSwiping, () => {
  if (direction.value === 'right') {
    isOpen.value = false;
  }
});

So there is no nice "dragging effect", but at least it is functunal.