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.