fix: not restoring position when unmounted (#55)

* fix: not restoring position when unmounted * Create hot-hats-obey.md
unovue · Jun 16, 2024 · e1cfb98 · e1cfb98
1 parent 9ecd93b
commit e1cfb98
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/.changeset/hot-hats-obey.md b/.changeset/hot-hats-obey.md
@@ -0,0 +1,5 @@
+---
+"vaul-vue": minor
+---
+
+fix: not restoring position when unmounted
diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
@@ -1,4 +1,4 @@
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
 import type { ComponentPublicInstance, Ref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { dampenValue, getTranslateY, reset, set } from './helpers'
@@ -410,7 +410,6 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     })
 
     scaleBackground(false)
-    restorePositionSetting()
 
     window.setTimeout(() => {
       isVisible.value = false
@@ -434,6 +433,11 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     }
   })
 
+  onUnmounted(() => {
+    scaleBackground(false)
+    restorePositionSetting()
+  })
+
   function onRelease(event: PointerEvent) {
     if (!isDragging.value || !drawerRef.value)
       return

diff --git a/packages/vaul-vue/src/usePositionFixed.ts b/packages/vaul-vue/src/usePositionFixed.ts
@@ -40,19 +40,24 @@ export function usePositionFixed(options: PositionFixedOptions) {
 
       setTimeout(() => {
         requestAnimationFrame(() => {
+          // Attempt to check if the bottom bar appeared due to the position change
           const bottomBarHeight = innerHeight - window.innerHeight
-          if (bottomBarHeight && scrollPos.value >= innerHeight)
+          if (bottomBarHeight && scrollPos.value >= innerHeight) {
+            // Move the content further up so that the bottom bar doesn't hide it
             document.body.style.top = `-${scrollPos.value + bottomBarHeight}px`
+          }
         })
       }, 300)
     }
   }
 
   function restorePositionSetting(): void {
     if (previousBodyPosition !== null) {
+      // Convert the position from "px" to Int
       const y = -Number.parseInt(document.body.style.top, 10)
       const x = -Number.parseInt(document.body.style.left, 10)
 
+      // Restore styles
       Object.assign(document.body.style, previousBodyPosition)
 
       requestAnimationFrame(() => {
@@ -84,10 +89,14 @@ export function usePositionFixed(options: PositionFixedOptions) {
   watch([isOpen, hasBeenOpened, activeUrl], () => {
     if (nested.value || !hasBeenOpened.value)
       return
+
+    // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
     if (isOpen.value) {
-      setPositionFixed()
+      // avoid for standalone mode (PWA)
+      const isStandalone = window.matchMedia('(display-mode: standalone)').matches
+      !isStandalone && setPositionFixed()
 
-      if (!modal) {
+      if (!modal.value) {
         setTimeout(() => {
           restorePositionSetting()
         }, 500)