Merge pull request #354 from vue-final/fix/352

fix: #352

Author: hunterliu1003

packages/vue-final-modal/src/components/CoreModal/CoreModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import { coreModalProps } from './CoreModalProps'
 import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
@@ -76,15 +76,20 @@ const {
   leaveTransition,
 } = useTransition(props, {
   modelValueLocal,
+  onEntering() {
+    nextTick(() => {
+      disableBodyScroll()
+    })
+  },
   onEnter() {
     focus()
-    disableBodyScroll()
     emitEvent('opened')
     resolveToggle('opened')
   },
   onLeave() {
     deleteFromOpenedModals(getModalInstance())
     resetZIndex()
+    enableBodyScroll()
     emitEvent('closed')
     resolveToggle('closed')
   },
@@ -148,7 +153,6 @@ async function open() {
 
 function close() {
   emitEvent('beforeClose')
-  enableBodyScroll()
   deleteFromOpenedModalOverlays(modalInstance)
   openLastOverlay()
   blur()

packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts

@@ -3,8 +3,13 @@ import { onBeforeUnmount, watch } from 'vue'
 import type CoreModal from './CoreModal.vue'
 
 type BodyScrollOptions = {
-  reserveScrollBarGap: boolean
-  allowTouchMove: (el?: null | HTMLElement) => boolean
+  reserveScrollBarGap?: boolean
+  allowTouchMove?: (el?: null | HTMLElement) => boolean
+}
+
+type Lock = {
+  targetElement: HTMLElement
+  options?: BodyScrollOptions
 }
 
 // stolen from body-scroll-lock
@@ -33,7 +38,7 @@ const isIosDevice
   && (/iP(ad|hone|od)/.test(window.navigator.platform)
     || (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1))
 
-let locks: any[] = []
+let locks: Lock[] = []
 let documentListenerAdded = false
 let clientY = 0
 let initialClientY = -1
@@ -232,6 +237,13 @@ export function useLockScroll(props: InstanceType<typeof CoreModal>['$props'], o
   lockScrollEl: Ref<undefined | HTMLElement>
 }) {
   const { lockScrollEl } = options
+
+  let _lockScrollEl: HTMLElement
+  watch(lockScrollEl, (val) => {
+    if (val)
+      _lockScrollEl = val
+  }, { immediate: true })
+
   watch(() => props.lockScroll, (val) => {
     val ? _disableBodyScroll() : _enableBodyScroll()
   })
@@ -241,12 +253,12 @@ export function useLockScroll(props: InstanceType<typeof CoreModal>['$props'], o
   })
 
   function _enableBodyScroll() {
-    lockScrollEl.value && enableBodyScroll(lockScrollEl.value)
+    _lockScrollEl && enableBodyScroll(_lockScrollEl)
   }
 
   function _disableBodyScroll() {
-    props.lockScroll && lockScrollEl.value
-      && disableBodyScroll(lockScrollEl.value, {
+    props.lockScroll && _lockScrollEl
+      && disableBodyScroll(_lockScrollEl, {
         reserveScrollBarGap: true,
         allowTouchMove: (el) => {
           while (el && el !== document.body) {