fix(comp:modal): reading contains after onmounted causes an exception (…

…#1371)
IDuxFE · Dec 23, 2022 · de416c1 · de416c1
1 parent f19efbe
commit de416c1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/packages/components/drawer/src/DrawerWrapper.tsx b/packages/components/drawer/src/DrawerWrapper.tsx
@@ -201,9 +201,9 @@ function watchVisibleChange(
     () => props.visible,
     visible => {
       if (visible) {
-        const wrapperElement = wrapperRef.value!
+        const wrapperElement = wrapperRef.value
         const activeElement = document.activeElement
-        if (!wrapperElement.contains(activeElement)) {
+        if (wrapperElement && !wrapperElement.contains(activeElement)) {
           lastOutSideActiveElement = activeElement as HTMLElement
           sentinelStartRef.value?.focus()
         }
@@ -286,17 +286,17 @@ function useEvents(
 ) {
   let lastOutSideActiveElement: HTMLElement | null = null
   const onEnter = () => {
-    const wrapperElement = wrapperRef.value!
+    const wrapperElement = wrapperRef.value
     const activeElement = document.activeElement
-    if (!wrapperElement.contains(activeElement)) {
+    if (wrapperElement && !wrapperElement.contains(activeElement)) {
       lastOutSideActiveElement = activeElement as HTMLElement
     }
   }
 
   const onAfterEnter = () => {
-    const wrapperElement = wrapperRef.value!
+    const wrapperElement = wrapperRef.value
     const activeElement = document.activeElement
-    if (!wrapperElement.contains(activeElement)) {
+    if (wrapperElement && !wrapperElement.contains(activeElement)) {
       wrapperElement.focus()
     }
 
@@ -306,14 +306,14 @@ function useEvents(
 
   const onAfterLeave = () => {
     if (lastOutSideActiveElement && isFunction(lastOutSideActiveElement.focus)) {
-      const wrapperElement = wrapperRef.value!
+      const wrapperElement = wrapperRef.value
       const activeElement = document.activeElement
 
       if (
         !activeElement ||
         activeElement === document.body ||
         activeElement === wrapperElement ||
-        wrapperElement.contains(activeElement)
+        (wrapperElement && wrapperElement.contains(activeElement))
       ) {
         lastOutSideActiveElement.focus()
       }

diff --git a/packages/components/menu/src/contents/menu-sub/MenuSub.tsx b/packages/components/menu/src/contents/menu-sub/MenuSub.tsx
@@ -37,7 +37,7 @@ export default defineComponent({
   props: menuSubProps,
   setup(props) {
     const common = useGlobalConfig('common')
-    const mergedTransitionName = computed(() => `${common.prefixCls}-fade`)
+    const mergedTransitionName = computed(() => `${common.prefixCls}-fade-fast`)
 
     // menuContext must exist
     const {

diff --git a/packages/components/modal/src/ModalWrapper.tsx b/packages/components/modal/src/ModalWrapper.tsx
@@ -240,9 +240,9 @@ function watchVisibleChange(
     () => props.visible,
     visible => {
       if (visible) {
-        const wrapperElement = wrapperRef.value!
+        const wrapperElement = wrapperRef.value
         const activeElement = document.activeElement
-        if (!wrapperElement.contains(activeElement)) {
+        if (wrapperElement && !wrapperElement.contains(activeElement)) {
           lastOutSideActiveElement = activeElement as HTMLElement
           sentinelStartRef.value?.focus()
         }
@@ -329,9 +329,9 @@ function useEvents(
 ) {
   let lastOutSideActiveElement: HTMLElement | null = null
   const onEnter = () => {
-    const wrapperElement = wrapperRef.value!
+    const wrapperElement = wrapperRef.value
     const activeElement = document.activeElement
-    if (!wrapperElement.contains(activeElement)) {
+    if (wrapperElement && !wrapperElement.contains(activeElement)) {
       lastOutSideActiveElement = activeElement as HTMLElement
     }
 
@@ -347,9 +347,9 @@ function useEvents(
   }
 
   const onAfterEnter = () => {
-    const wrapperElement = wrapperRef.value!
+    const wrapperElement = wrapperRef.value
     const activeElement = document.activeElement
-    if (!wrapperElement.contains(activeElement)) {
+    if (wrapperElement && !wrapperElement.contains(activeElement)) {
       wrapperElement.focus()
     }
 
@@ -366,7 +366,7 @@ function useEvents(
         !activeElement ||
         activeElement === document.body ||
         activeElement === wrapperElement ||
-        wrapperElement.contains(activeElement)
+        (wrapperElement && wrapperElement.contains(activeElement))
       ) {
         lastOutSideActiveElement.focus()
       }