refactor: useLockScroll

packages/lib/src/VueFinalModal.vue

@@ -62,7 +62,7 @@
 import { ref, reactive, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue'
 import { useFocusTrap } from './utils/focusTrap.js'
 import { useDragResize } from './utils/dragResize.js'
-import { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'
+import { useLockScroll } from './utils/bodyScrollLock'
 import { TransitionState, useTransitionState } from './utils/transitionState'
 
 const noop = () => {}
@@ -185,6 +185,8 @@ export default {
       }
     })
 
+    const { handleLockScroll } = useLockScroll({ props, vfmContainer, modalTransitionState })
+
     const lastMousedownEl = ref(null)
 
     let resolveToggle = noop
@@ -252,8 +254,6 @@ export default {
       }
     )
 
-    watch(() => props.lockScroll, handleLockScroll)
-
     watch(
       () => props.hideOverlay,
       value => {
@@ -290,7 +290,6 @@ export default {
           break
         case TransitionState.Leave:
           modalStackIndex.value = null
-          props.lockScroll && enableBodyScroll(vfmContainer.value)
 
           let stopEvent = false
           const event = createModalEvent({
@@ -316,7 +315,6 @@ export default {
 
     onBeforeUnmount(() => {
       close()
-      props.lockScroll && vfmContainer.value && enableBodyScroll(vfmContainer.value)
       root?.value?.remove()
 
       let index = props.api.modals.findIndex(vm => vm.uid === uid)
@@ -414,20 +412,6 @@ export default {
       startTransitionLeave()
     }
 
-    function handleLockScroll() {
-      if (props.modelValue) {
-        nextTick(() => {
-          if (props.lockScroll) {
-            disableBodyScroll(vfmContainer.value, {
-              reserveScrollBarGap: true
-            })
-          } else {
-            enableBodyScroll(vfmContainer.value)
-          }
-        })
-      }
-    }
-
     function getAttachElement() {
       let target
       if (props.attach === false) {

packages/lib/src/utils/bodyScrollLock.js

@@ -1,3 +1,6 @@
+import { watch, nextTick, onBeforeUnmount } from 'vue'
+import { TransitionState } from './transitionState'
+
 // stolen from body-scroll-lock
 
 // Older browsers don't support event options, feature detect it.
@@ -211,3 +214,37 @@ export const enableBodyScroll = targetElement => {
     restoreOverflowSetting()
   }
 }
+
+export function useLockScroll({ props, vfmContainer, modalTransitionState }) {
+  watch(() => props.lockScroll, handleLockScroll)
+
+  watch(modalTransitionState, state => {
+    if (state === TransitionState.Leave) {
+      enable()
+    }
+  })
+
+  onBeforeUnmount(() => {
+    enable()
+  })
+
+  function handleLockScroll() {
+    if (!props.modelValue) return
+    nextTick(() => {
+      props.lockScroll ? disable() : enable()
+    })
+  }
+
+  function enable() {
+    props.lockScroll && vfmContainer.value && enableBodyScroll(vfmContainer.value)
+  }
+
+  function disable() {
+    vfmContainer.value &&
+      disableBodyScroll(vfmContainer.value, {
+        reserveScrollBarGap: true
+      })
+  }
+
+  return { handleLockScroll }
+}