fix: fixed focusTrap in nested modals (#341)

Author: hunterliu1003

packages/vue-final-modal/src/Modal.ts

@@ -76,6 +76,5 @@ export type Modal = {
   modalId?: ModalId
   hideOverlay: Ref<boolean | undefined> | undefined
   overlayVisible: Ref<boolean>
-  focus: () => void
   toggle: (show?: boolean) => Promise<string>
 }

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

@@ -52,7 +52,7 @@ const {
 
 const vfmRootEl = ref<HTMLDivElement>()
 
-const { focus, focusLast, blur } = useFocusTrap(props, { focusEl: vfmRootEl, openedModals })
+const { focus, blur } = useFocusTrap(props, { focusEl: vfmRootEl })
 const { zIndex, refreshZIndex, resetZIndex } = useZIndex(props)
 const { enableBodyScroll, disableBodyScroll } = useLockScroll(props, { lockScrollEl: vfmRootEl })
 const { modelValueLocal } = useModelValue(props, emit)
@@ -83,7 +83,6 @@ const {
   },
   onLeave() {
     deleteFromOpenedModals(getModalInstance())
-    focusLast()
     resetZIndex()
     emitEvent('closed')
     resolveToggle('closed')
@@ -161,7 +160,7 @@ onBeforeUnmount(() => {
   deleteFromModals(modalInstance)
   deleteFromOpenedModals(modalInstance)
   deleteFromOpenedModalOverlays(modalInstance)
-  focusLast()
+  blur()
   openLastOverlay()
 })
 </script>

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

@@ -1,24 +1,21 @@
-import type { ComputedRef, Ref } from 'vue'
+import type { Ref } from 'vue'
 import { useFocusTrap as _useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import type CoreModal from './CoreModal.vue'
-import type { Modal } from '~/Modal'
 
 export function useFocusTrap(
   props: InstanceType<typeof CoreModal>['$props'],
   options: {
     focusEl: Ref<undefined | HTMLDivElement>
-    openedModals: ComputedRef<Modal>[]
   },
 ) {
   if (props.focusTrap === false) {
     return {
       focus() {},
-      focusLast() {},
       blur() {},
     }
   }
 
-  const { focusEl, openedModals } = options
+  const { focusEl } = options
   const { hasFocus, activate, deactivate } = _useFocusTrap(focusEl, props.focusTrap)
 
   function focus() {
@@ -27,18 +24,10 @@ export function useFocusTrap(
     })
   }
 
-  function focusLast() {
-    // If there are still nested modals opened, focus the last opened modal
-    if (openedModals.length <= 0)
-      return
-    const modal = openedModals[openedModals.length - 1]
-    modal?.value.focus()
-  }
-
   function blur() {
     if (hasFocus.value)
       deactivate()
   }
 
-  return { focus, focusLast, blur }
+  return { focus, blur }
 }