refactor: useFocusTrap

packages/lib/src/VueFinalModal.vue

@@ -154,7 +154,6 @@ export default {
     const vfmTransition = ref(null)
 
     const modalStackIndex = ref(null)
-    const $focusTrap = useFocusTrap()
 
     const visible = ref(false)
     const visibility = reactive({
@@ -168,6 +167,12 @@ export default {
     const _stopEvent = ref(false)
     const params = ref({})
 
+    const { focusTrap } = useFocusTrap({
+      props,
+      vfmContainer,
+      modalTransitionState
+    })
+
     const { resizeVisible, state, dragResizeStyle, removeDragDown, removeResizeDown } = useDragResize({
       props,
       visible,
@@ -279,20 +284,10 @@ export default {
     watch(modalTransitionState, state => {
       switch (state) {
         case TransitionState.Enter:
-          if (props.focusRetain || props.focusTrap) {
-            vfmContainer.value.focus()
-          }
-          props.focusTrap && $focusTrap.enable(vfmContainer.value)
-
           emit('_opened')
           emit('opened', createModalEvent({ type: 'opened' }))
           resolveToggle('show')
           break
-        case TransitionState.Leaving:
-          if ($focusTrap.enabled) {
-            $focusTrap.disable()
-          }
-          break
         case TransitionState.Leave:
           modalStackIndex.value = null
           props.lockScroll && enableBodyScroll(vfmContainer.value)
@@ -343,7 +338,6 @@ export default {
         modalStackIndex,
         visibility,
         handleLockScroll,
-        $focusTrap,
         toggle,
         params
       }
@@ -403,8 +397,8 @@ export default {
 
         if ($_vm.props.focusTrap) {
           nextTick(() => {
-            $_vm.$focusTrap.enable($_vm.vfmContainer.value)
-            $_vm.$focusTrap.firstElement.focus()
+            focusTrap.enable($_vm.vfmContainer.value)
+            focusTrap.firstElement.focus()
           })
         }
 

packages/lib/src/utils/focusTrap.js

@@ -1,3 +1,6 @@
+import { watch } from 'vue'
+import { TransitionState } from './transitionState'
+
 // stolen from vue-js-modal
 
 const FOCUSABLE_ELEMENTS_QUERY =
@@ -119,17 +122,33 @@ class FocusTrap {
 /**
  * @type {FocusTrap | null}
  */
-let instance = null
+let focusTrap = null
 
 /**
- * Get FocusTrap instance
+ * Get FocusTrap focusTrap
  *
  * @returns {FocusTrap} focusTrap
  */
-export function useFocusTrap() {
-  if (instance == null) {
-    instance = new FocusTrap()
+export function useFocusTrap({ props, vfmContainer, modalTransitionState }) {
+  if (focusTrap == null) {
+    focusTrap = new FocusTrap()
   }
 
-  return instance
+  watch(modalTransitionState, state => {
+    switch (state) {
+      case TransitionState.Enter:
+        if (props.focusRetain || props.focusTrap) {
+          vfmContainer.value.focus()
+        }
+        props.focusTrap && focusTrap.enable(vfmContainer.value)
+        break
+      case TransitionState.Leaving:
+        if (focusTrap.enabled) {
+          focusTrap.disable()
+        }
+        break
+    }
+  })
+
+  return { focusTrap }
 }