Merge pull request #342 from vue-final/fix/esc

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 {
@@ -274,11 +274,11 @@ onBeforeUnmount(() => {
 }
 .vfm-slide-down-enter-from,
 .vfm-slide-down-leave-to {
-  transform: translateY(100vh);
+  transform: translateY(100vh) !important;
 }
 .vfm-slide-up-enter-from,
 .vfm-slide-up-leave-to {
-  transform: translateY(-100vh);
+  transform: translateY(-100vh) !important;
 }
 
 .vfm-slide-right-enter-active,
@@ -289,11 +289,11 @@ onBeforeUnmount(() => {
 }
 .vfm-slide-right-enter-from,
 .vfm-slide-right-leave-to {
-  transform: translateX(100vw);
+  transform: translateX(100vw) !important;
 }
 .vfm-slide-left-enter-from,
 .vfm-slide-left-leave-to {
-  transform: translateX(-100vw);
+  transform: translateX(-100vw) !important;
 }
 
 .vfm-swipe-banner-back,

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')
@@ -84,7 +84,6 @@ export function useSwipeToClose(
       const validSpeed = swipeEnd - swipeStart <= LIMIT_SPEED
 
       if (shouldCloseModal && allowSwipe && validDirection && (validDistance || validSpeed)) {
-        offset.value = 0
         modelValueLocal.value = false
         return
       }
@@ -93,6 +92,25 @@ export function useSwipeToClose(
     },
   })
 
+  const bindSwipe = computed(() => {
+    if (props.swipeToClose === 'none')
+      return
+    const translateDirection = (() => {
+      switch (props.swipeToClose) {
+        case 'up':
+        case 'down':
+          return 'translateY'
+        case 'left':
+        case 'right':
+          return 'translateX'
+      }
+    })()
+    return {
+      class: { 'vfm-bounce-back': !isSwiping.value },
+      style: { transform: `${translateDirection}(${-offset.value}px)` },
+    }
+  })
+
   watch(
     () => isCollapsed.value,
     (val) => {
@@ -101,6 +119,14 @@ export function useSwipeToClose(
     },
   )
 
+  watch(
+    () => modelValueLocal.value,
+    (val) => {
+      if (val)
+        offset.value = 0
+    },
+  )
+
   watch(
     () => offset.value,
     (newValue, oldValue) => {
@@ -117,6 +143,11 @@ export function useSwipeToClose(
     },
   )
 
+  function onTouchStartSwipeBanner(e: TouchEvent) {
+    if (props.preventNavigationGestures)
+      e.preventDefault()
+  }
+
   function canSwipe(target?: null | EventTarget): boolean {
     const tagName = (target as HTMLElement)?.tagName
     if (!tagName || ['INPUT', 'TEXTAREA'].includes(tagName))
@@ -143,38 +174,6 @@ export function useSwipeToClose(
       return allow && canSwipe((target as HTMLElement)?.parentElement)
   }
 
-  watch(
-    () => modelValueLocal.value,
-    (val) => {
-      if (val)
-        offset.value = 0
-    },
-  )
-
-  const bindSwipe = computed(() => {
-    if (props.swipeToClose === 'none')
-      return
-    const translateDirection = (() => {
-      switch (props.swipeToClose) {
-        case 'up':
-        case 'down':
-          return 'translateY'
-        case 'left':
-        case 'right':
-          return 'translateX'
-      }
-    })()
-    return {
-      class: { 'vfm-bounce-back': !isSwiping.value },
-      style: isSwiping.value ? { transform: `${translateDirection}(${-offset.value}px)` } : '',
-    }
-  })
-
-  function onTouchStartSwipeBanner(e: TouchEvent) {
-    if (props.preventNavigationGestures)
-      e.preventDefault()
-  }
-
   return {
     vfmContentEl,
     swipeBannerEl,