fix: should focus vfmContent element when click outside

Author: hunterliu1003

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

@@ -51,6 +51,7 @@ const {
 } as any as InternalVfm)
 
 const vfmRootEl = ref<HTMLDivElement>()
+const vfmContentEl = ref<HTMLDivElement>()
 
 const { focus, blur } = useFocusTrap(props, { focusEl: vfmRootEl })
 const { zIndex, refreshZIndex, resetZIndex } = useZIndex(props)
@@ -89,14 +90,13 @@ const {
   },
 })
 
-const { onEsc, onMouseupRoot, onMousedown } = useToClose(props, emit, { vfmRootEl, visible, modelValueLocal })
+const { onEsc, onMouseupRoot, onMousedown } = useToClose(props, emit, { vfmRootEl, vfmContentEl, visible, modelValueLocal })
 
 const {
-  vfmContentEl,
   swipeBannerEl,
   bindSwipe,
   onTouchStartSwipeBanner,
-} = useSwipeToClose(props, { modelValueLocal })
+} = useSwipeToClose(props, { vfmContentEl, modelValueLocal })
 
 const hideOverlay = toRef(props, 'hideOverlay')
 const modalInstance = computed<Modal>(() => ({
@@ -175,15 +175,14 @@ onBeforeUnmount(() => {
     :style="{ zIndex }"
     role="dialog"
     aria-modal="true"
-    @keydown.esc="onEsc"
+    @keydown.esc="() => onEsc()"
     @mouseup.self="() => onMouseupRoot()"
     @mousedown.self="e => onMousedown(e)"
   >
     <Transition v-if="!hideOverlay" v-bind="overlayTransition" appear v-on="overlayListeners">
       <div
         v-if="overlayVisible"
         class="vfm__overlay vfm--overlay vfm--absolute vfm--inset vfm--prevent-none"
-        style="z-index: -1"
         :class="overlayClass"
         :style="overlayStyle"
         aria-hidden="true"
@@ -240,6 +239,7 @@ onBeforeUnmount(() => {
   left: 0;
 }
 .vfm--overlay {
+  z-index: -1;
   background-color: rgba(0, 0, 0, 0.5);
 }
 .vfm--prevent-none {

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

@@ -7,15 +7,16 @@ export function useToClose(
   emit: InstanceType<typeof CoreModal>['$emit'],
   options: {
     vfmRootEl: Ref<HTMLDivElement | undefined>
+    vfmContentEl: Ref<HTMLDivElement | undefined>
     visible: Ref<boolean>
     modelValueLocal: Ref<boolean>
   }) {
-  const { vfmRootEl, visible, modelValueLocal } = options
+  const { vfmRootEl, vfmContentEl, visible, modelValueLocal } = options
   const lastMousedownEl = ref<EventTarget | null>()
 
   function onEsc() {
     if (visible.value && props.escToClose)
-      (modelValueLocal.value = false)
+      modelValueLocal.value = false
   }
 
   function onMousedown(e?: MouseEvent) {
@@ -27,10 +28,13 @@ export function useToClose(
     if (lastMousedownEl.value !== vfmRootEl.value)
       return
 
-    if (props.clickToClose)
+    if (props.clickToClose) {
       modelValueLocal.value = false
-    else
+    }
+    else {
+      vfmContentEl.value?.focus()
       emit('clickOutside')
+    }
   }
 
   return {

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

@@ -8,14 +8,14 @@ import { clamp, noop } from './utils'
 export function useSwipeToClose(
   props: InstanceType<typeof CoreModal>['$props'],
   options: {
+    vfmContentEl: Ref<HTMLDivElement | undefined>
     modelValueLocal: Ref<boolean>
   },
 ) {
-  const { modelValueLocal } = options
+  const { vfmContentEl, modelValueLocal } = options
   const LIMIT_DISTANCE = 0.1
   const LIMIT_SPEED = 300
 
-  const vfmContentEl = ref<HTMLDivElement>()
   const swipeBannerEl = ref<HTMLDivElement>()
   const swipeEl = computed(() => {
     if (props.swipeToClose === undefined || props.swipeToClose === 'none')