fix(comp:overlay): quick switch visible causes positioning error (#1384)

IDuxFE · Jan 3, 2023 · 5d13977 · 5d13977
1 parent e474fa5
commit 5d13977
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 46 deletions.
diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx
@@ -58,20 +58,25 @@ export default defineComponent({
       destroy,
     } = usePopper({ ...popperOptions.value, visible: props.visible })
 
-    const { destroy: popperDestroy } = usePopperInit(props, initialize, destroy)
     const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visibility)
     const mergedContainer = computed(() => {
       const { container = common.overlayContainer } = props
       return (isFunction(container) ? container(convertElement(triggerRef)!) : container) ?? props.containerFallback
     })
 
+    onMounted(() => initialize())
+    onBeforeUnmount(() => destroy())
+
     watch(visibility, value => callEmit(props['onUpdate:visible'], value))
     watch(placement, value => callEmit(props['onUpdate:placement'], value))
     watch(popperOptions, options => update(options))
     watch(
       () => props.visible,
       visible => {
         visible ? show() : hide()
+        if (visible && props.destroyOnHide) {
+          initialize()
+        }
       },
       { flush: 'post' },
     )
@@ -85,7 +90,7 @@ export default defineComponent({
 
     const onAfterLeave = () => {
       if (props.destroyOnHide) {
-        popperDestroy()
+        destroy()
       }
       callEmit(props.onAfterLeave)
     }
@@ -164,50 +169,6 @@ function usePopperOptions(props: OverlayProps, arrowRef: Ref<HTMLElement | undef
   })
 }
 
-function usePopperInit(
-  props: OverlayProps,
-  initialize: () => void,
-  destroy: () => void,
-): {
-  initialize: () => void
-  destroy: () => void
-} {
-  let initialized = false
-  const _initialize = () => {
-    if (initialized) {
-      return
-    }
-
-    initialize()
-    initialized = true
-  }
-  const _destroy = () => {
-    if (!initialized) {
-      return
-    }
-
-    destroy()
-    initialized = false
-  }
-
-  onMounted(_initialize)
-  onBeforeUnmount(_destroy)
-
-  watch(
-    () => props.visible,
-    visible => {
-      if (visible) {
-        initialize()
-      }
-    },
-  )
-
-  return {
-    initialize: _initialize,
-    destroy: _destroy,
-  }
-}
-
 function renderContent(
   props: OverlayProps,
   mergedPrefixCls: ComputedRef<string>,

diff --git a/packages/components/anchor/style/index.less b/packages/components/anchor/style/index.less
@@ -66,6 +66,7 @@
       position: relative;
       display: block;
       text-decoration: none;
+      color: var(--ix-text-color);
       transition: color var(--ix-transition-duration-fast);
 
       &:hover,