Prevent @interact-outside

[affemaen]

Hi, I'm using Sonner (https://github.com/xiaoluoboding/vue-sonner) and Drawer(vaul-vue) from shadcn-vue.

I'm trying to prevent interact-outside if a Sonner toast is clicked.

Like explained here

Examples
Sonner with Dialog
https://www.shadcn-vue.com/docs/components/sonner.html

`
<DrawerContent
....
@interact-outside="event => {
const target = event.target as HTMLElement;
if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
}"

`

But the drawer is still closed . I can se that the emitted event is prevented using the debugger. I've also tried using @pointer-down-outside without any success.

Any advice on how I can prevent the drawer from being closed when clicking on a Sonner toast?

[zernonia]

Hi @affemaen . Latest release fixed the always prevented custom event. Could you try again with your approach above and see if it is fixed? 😁

[valonsodev]

Hi @affemaen . Latest release fixed the always prevented custom event. Could you try again with your approach above and see if it is fixed? 😁

Originally posted by @zernonia in #95
Same use case as @affemaen but i dont really understand what is happening. I am not able to prevent the drawer from closing even with latest release. It seems to be related to v-model.

Reproduction steps

1. Take the responsive dialog example from shadcn-vue
2. Add @interact-outside="event => {return event.preventDefault()}" to both DialogContent and DrawerContent
3. It prevents Dialog from closing but not Drawer.

!!! Important !!!

If you remove v-model:open="isOpen" from <Drawer v-else v-model:open="isOpen"> it succesfully prevents the drawer from closing but I have no clue why or how that works and then you cant programatically close the drawer (i think)

[affemaen]

@zernonia thanks for the new release. It works as expected preventing the event on click outside using a drawer trigger. But as @valonsodev found it won't work if you put a v-model on the drawer.

Working example below

<script setup lang="ts">
const { $toast } = useNuxtApp()

function showToaster() {
  $toast.success('Hello world!', {
    position: 'bottom-center',
  })
}
</script>

<template>
  <div class="w-full max-w-screen-xl min-h-dvh mx-auto px-4 my-10 flex justify-center">
    <Drawer>
      <DrawerTrigger as-child>
        <Button variant="outline">
          Open Drawer
        </Button>
      </DrawerTrigger>
      <DrawerContent
        @interact-outside="event => {
          const target = event.target as HTMLElement;
          if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
        }"
      >
        <div class="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Test</DrawerTitle>
            <DrawerDescription>Sonner and Drawer test</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button @click="showToaster">
              Toast
            </Button>
            <DrawerClose as-child>
              <Button variant="outline">
                Cancel
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  </div>
</template>

Not working

<script setup lang="ts">
const { $toast } = useNuxtApp()

function showToaster() {
  $toast.success('Hello world!', {
    position: 'bottom-center',
  })
}

const open = ref(false)
</script>

<template>
  <div class="w-full max-w-screen-xl min-h-dvh mx-auto px-4 my-10 flex justify-center">
    <Button @click="open = !open">
      {{ open ? 'Close' : 'Open' }} Drawer
    </Button>
    <Drawer v-model:open="open">
      <DrawerContent
        @interact-outside="event => {
          const target = event.target as HTMLElement;
          if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
        }"
      >
        <div class="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Test</DrawerTitle>
            <DrawerDescription>Sonner and Drawer test</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button @click="showToaster">
              Toast
            </Button>
            <DrawerClose as-child>
              <Button variant="outline">
                Cancel
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  </div>
</template>