perf: trigger

components/_util/transition.tsx

@@ -16,7 +16,7 @@ export const getTransitionProps = (transitionName: string, opt: TransitionProps
   const transitionProps: TransitionProps = transitionName
     ? {
         appear: true,
-        type: 'animation',
+        // type: 'animation',
         // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
         // appearActiveClass: `antdv-base-transtion`,
         // appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,

components/vc-align/Align.tsx

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import { nextTick, PropType } from 'vue';
 import { defineComponent, ref, computed, onMounted, onUpdated, watch, onUnmounted } from 'vue';
 import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from '../vc-util/Dom/addEventListener';
@@ -56,13 +56,6 @@ export default defineComponent({
   setup(props, { expose, slots }) {
     const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>({});
     const nodeRef = ref();
-    const forceAlignPropsRef = computed(() => ({
-      disabled: props.disabled,
-      target: props.target,
-      align: props.align,
-      onAlign: props.onAlign,
-    }));
-
     const [forceAlign, cancelForceAlign] = useBuffer(
       () => {
         const {
@@ -70,7 +63,7 @@ export default defineComponent({
           target: latestTarget,
           align: latestAlign,
           onAlign: latestOnAlign,
-        } = forceAlignPropsRef.value;
+        } = props;
         if (!latestDisabled && latestTarget && nodeRef.value) {
           const source = nodeRef.value;
 
@@ -83,29 +76,14 @@ export default defineComponent({
           cacheRef.value.align = latestAlign;
           // IE lose focus after element realign
           // We should record activeElement and restore later
-          // const { activeElement } = document;
-          // console.log(
-          //   '🌹',
-          //   source.style.display,
-          //   source.style.left,
-          //   source.style.top,
-          //   source.className,
-          // );
+          const { activeElement } = document;
           // We only align when element is visible
           if (element && isVisible(element)) {
             result = alignElement(source, element, latestAlign);
           } else if (point) {
             result = alignPoint(source, point, latestAlign);
           }
-
-          // console.log(
-          //   '😸',
-          //   source.style.display,
-          //   source.style.left,
-          //   source.style.top,
-          //   source.className,
-          // );
-          // restoreFocus(activeElement, source);
+          restoreFocus(activeElement, source);
 
           if (latestOnAlign && result) {
             latestOnAlign(source, result);
@@ -157,12 +135,16 @@ export default defineComponent({
     };
 
     onMounted(() => {
+      nextTick(() => {
         goAlign();
       });
+    });
 
     onUpdated(() => {
+      nextTick(() => {
         goAlign();
       });
+    });
 
     // Listen for disabled change
     watch(
@@ -174,7 +156,7 @@ export default defineComponent({
           cancelForceAlign();
         }
       },
-      { flush: 'post' },
+      { immediate: true, flush: 'post' },
     );
 
     // Listen for window resize
@@ -210,7 +192,7 @@ export default defineComponent({
       if (child) {
         return cloneElement(child[0], { ref: nodeRef }, true, true);
       }
-      return child && child[0];
+      return null;
     };
   },
 });

components/vc-trigger/Popup/PopupInner.tsx

@@ -59,15 +59,14 @@ export default defineComponent({
 
     const onInternalAlign = (popupDomNode: HTMLElement, matchAlign: AlignType) => {
       const nextAlignedClassName = props.getClassNameFromAlign(matchAlign);
+      const preAlignedClassName = alignedClassName.value;
       if (alignedClassName.value !== nextAlignedClassName) {
-        nextTick(() => {
         alignedClassName.value = nextAlignedClassName;
-        });
       }
       if (status.value === 'align') {
         // Repeat until not more align needed
-        if (alignedClassName.value !== nextAlignedClassName) {
-          Promise.resolve().then(() => {
+        if (preAlignedClassName !== nextAlignedClassName) {
+          nextTick(() => {
             forceAlign();
           });
         } else {
@@ -148,12 +147,7 @@ export default defineComponent({
       const mergedClassName = classNames(prefixCls, attrs.class, alignedClassName.value);
       const transitionProps = getTransitionProps(motion.value.name, motion.value);
       return (
-        <Transition
-          ref={elementRef}
-          {...transitionProps}
-          onBeforeAppear={onShowPrepare}
-          onBeforeEnter={onShowPrepare}
-        >
+        <Transition ref={elementRef} {...transitionProps} onBeforeEnter={onShowPrepare}>
           {!destroyPopupOnHide || visible ? (
             <Align
               v-show={visible}

components/vc-trigger/Popup/useVisibleStatus.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+import { nextTick } from 'vue';
 import { onBeforeUnmount } from 'vue';
 import { ref, watch } from 'vue';
 import raf from '../../_util/raf';
@@ -26,7 +27,6 @@ export default (
   const status = ref<PopupStatus>(null);
   const rafRef = ref<number>();
   const destroyRef = ref(false);
-
   function setStatus(nextStatus: PopupStatus) {
     if (!destroyRef.value) {
       status.value = nextStatus;
@@ -60,9 +60,9 @@ export default (
   watch(
     visible,
     () => {
-      status.value = 'measure';
+      setStatus('measure');
     },
-    { immediate: true },
+    { immediate: true, flush: 'post' },
   );
   // Go next status
   watch(
@@ -76,7 +76,7 @@ export default (
       }
 
       if (status.value) {
-        rafRef.value = raf(async () => {
+        nextTick(() => {
           const index = StatusQueue.indexOf(status.value);
           const nextStatus = StatusQueue[index + 1];
           if (nextStatus && index !== -1) {
@@ -85,7 +85,7 @@ export default (
         });
       }
     },
-    { immediate: true },
+    { immediate: true, flush: 'post' },
   );
   onBeforeUnmount(() => {
     destroyRef.value = true;

components/vc-trigger/Trigger.tsx

@@ -455,7 +455,7 @@ export default defineComponent({
         maskAnimation,
         maskTransitionName,
         getContainer,
-        popupClassName,
+        class: popupClassName,
         style: popupStyle,
         onAlign: $attrs.onPopupAlign || noop,
         ...mouseProps,