fix: body style persist after unmount (#96)

* fix: background style was persisiting

* fix: not able to dismiss drawer when clicking on overlay

* fix: dont prevent pointer down outside event

* fix: dismissable case

* Create strange-cheetahs-call.md

Author: zernonia

.changeset/strange-cheetahs-call.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+fix body style persist after unmount, clicking overlay not dismissing drawer

packages/vaul-vue/src/DrawerContent.vue

@@ -41,10 +41,12 @@ function handlePointerDownOutside(event: Event) {
   if (keyboardIsOpen.value)
     keyboardIsOpen.value = false
 
-  event.preventDefault()
-
-  if (dismissible.value)
+  if (dismissible.value) {
     emitOpenChange(false)
+  }
+  else {
+    event.preventDefault()
+  }
 }
 
 function handlePointerDown(event: PointerEvent) {

packages/vaul-vue/src/controls.ts

@@ -519,10 +519,6 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     }
   })
 
-  onUnmounted(() => {
-    restorePositionSetting()
-  })
-
   function onRelease(event: PointerEvent) {
     if (!isDragging.value || !drawerRef.value)
       return

packages/vaul-vue/src/usePositionFixed.ts

@@ -25,6 +25,11 @@ export function usePositionFixed(options: PositionFixedOptions) {
   const scrollPos = ref(0)
 
   function setPositionFixed(): void {
+    // All browsers on iOS will return true here.
+    if (!isSafari())
+      return
+
+    // If previousBodyPosition is already set, don't set it again.
     if (previousBodyPosition === null && isOpen.value && !noBodyStyles.value) {
       previousBodyPosition = {
         position: document.body.style.position,
@@ -33,13 +38,16 @@ export function usePositionFixed(options: PositionFixedOptions) {
         height: document.body.style.height,
       }
 
+      // Update the dom inside an animation frame
       const { scrollX, innerHeight } = window
 
-      document.body.style.position = 'fixed'
-      document.body.style.top = `-${scrollPos.value}px`
-      document.body.style.left = `-${scrollX}px`
-      document.body.style.right = '0px'
-      document.body.style.height = 'auto'
+      document.body.style.setProperty('position', 'fixed', 'important')
+      Object.assign(document.body.style, {
+        top: `${-scrollPos.value}px`,
+        left: `${-scrollX}px`,
+        right: '0px',
+        height: 'auto',
+      })
 
       setTimeout(() => {
         requestAnimationFrame(() => {