fix: use vueuse scroll lock on root

.changeset/angry-moles-repair.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+Use vueuse's scoll lock to prevent scroll issues on ios

packages/vaul-vue/package.json

@@ -36,6 +36,7 @@
     "release": "pnpm run build-only"
   },
   "dependencies": {
+    "@vueuse/core": "^10.7.2",
     "radix-vue": "^1.2.5",
     "vue": "^3.4.5"
   },

packages/vaul-vue/src/DrawerRoot.vue

@@ -3,6 +3,7 @@ import { DialogRoot } from 'radix-vue'
 import { provideDrawerRootContext } from './context'
 import { type DialogProps, useDrawer } from './controls'
 import { watch } from 'vue'
+import { useScrollLock } from '@vueuse/core'
 
 const open = defineModel<boolean>('open', {
   default: false
@@ -28,6 +29,8 @@ const {
   dismissible
 } = provideDrawerRootContext(useDrawer())
 
+const preventScroll = useScrollLock(document, false)
+
 if (props.snapPoints) {
   snapPoints.value = props.snapPoints
   activeSnapPoint.value = props.snapPoints[0]
@@ -75,6 +78,9 @@ const handleOpenChange = (o: boolean) => {
 }
 
 watch(open, (o) => handleOpenChange(o), { immediate: true })
+watch([isOpen, hasBeenOpened], ([openValue, hasOpenedValue]) => {
+  preventScroll.value = openValue || hasOpenedValue
+})
 </script>
 
 <template>