fix(Drawer): prevent unwanted close when dismissible is false (#5085)

Co-authored-by: Benjamin Canac <[email protected]>

Author: devzom

docs/content/3.components/drawer.md

@@ -293,7 +293,7 @@ This allows you to move the trigger outside of the Drawer or remove it entirely.
 
 ### Disable dismissal
 
-Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape.
+Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
 
 ::component-example
 ---

playground/app/pages/components/drawer.vue

@@ -42,6 +42,21 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
+    <UDrawer
+      title="Drawer prevent close"
+      description="This drawer has `dismissible: false` prop so it won't close when clicking outside."
+      :dismissible="false"
+      :modal="false"
+      :overlay="false"
+      :inset="inset"
+    >
+      <UButton label="Open unclosable" color="neutral" variant="outline" />
+
+      <template #body>
+        <Placeholder class="h-96 w-full" />
+      </template>
+    </UDrawer>
+
     <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on bottom" />
 

playground/app/pages/components/modal.vue

@@ -56,7 +56,7 @@ function openModal() {
       <UButton label="Open fullscreen" color="neutral" variant="outline" />
     </UModal>
 
-    <UModal title="Modal prevent close" description="This modal has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false">
+    <UModal title="Modal prevent close" description="This modal has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false" :modal="false" :overlay="false">
       <UButton label="Open unclosable" color="neutral" variant="subtle" />
     </UModal>
 

playground/app/pages/components/slideover.vue

@@ -100,7 +100,7 @@ function openSlideover() {
       </template>
     </USlideover>
 
-    <USlideover title="Slideover prevent close" description="This slideover has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false">
+    <USlideover title="Slideover prevent close" description="This slideover has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false" :modal="false" :overlay="false">
       <UButton label="Open unclosable" color="neutral" variant="subtle" />
 
       <template #body>

src/runtime/components/Drawer.vue

@@ -46,7 +46,9 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
   ui?: Drawer['slots']
 }
 
-export interface DrawerEmits extends DrawerRootEmits {}
+export interface DrawerEmits extends DrawerRootEmits {
+  (e: 'close:prevent'): void
+}
 
 export interface DrawerSlots {
   default(props?: {}): any
@@ -84,9 +86,25 @@ const appConfig = useAppConfig() as Drawer['AppConfig']
 const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
-const contentEvents = {
-  closeAutoFocus: (e: Event) => e.preventDefault()
-}
+const contentEvents = computed(() => {
+  const defaultEvents = {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
+
+  if (!props.dismissible) {
+    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown']
+
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e: Event) => {
+        e.preventDefault()
+        emits('close:prevent')
+      }
+      return acc
+    }, defaultEvents as Record<typeof events[number] | keyof typeof defaultEvents, (e: Event) => void>)
+  }
+
+  return defaultEvents
+})
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })({
   direction: props.direction,