fix: popover mount content twice

packages/semi-foundation/tooltip/foundation.ts

@@ -26,7 +26,6 @@ const defaultRect = {
 
 export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerPortalEvent(portalEventSet: any): void;
-    unregisterPortalEvent(): void;
     registerResizeHandler(onResize: () => void): void;
     unregisterResizeHandler(onResize?: () => void): void;
     on(arg0: string, arg1: () => void): void;
@@ -56,7 +55,6 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     togglePortalVisible(...args: any[]): void;
     registerClickOutsideHandler(...args: any[]): void;
     unregisterClickOutsideHandler(...args: any[]): void;
-    unregisterTriggerEvent(): void;
     containerIsRelative(): boolean;
     containerIsRelativeOrAbsolute(): boolean;
     getDocumentElementBounding(): DOMRect;
@@ -101,7 +99,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
     destroy() {
         this._mounted = false;
-        this._unBindEvent();
+        this.unBindEvent();
     }
 
     _bindEvent() {
@@ -112,37 +110,34 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._bindResizeEvent();
     }
 
-    _unBindEvent() {
-        this._unBindTriggerEvent();
-        this._unBindPortalEvent();
-        this._unBindResizeEvent();
-        this._unBindScrollEvent();
+    unBindEvent() {
+        this._adapter.unregisterClickOutsideHandler();
+        this.unBindResizeEvent();
+        this.unBindScrollEvent();
     }
 
     _bindTriggerEvent(triggerEventSet: Record<string, any>) {
         this._adapter.registerTriggerEvent(triggerEventSet);
     }
 
-    _unBindTriggerEvent() {
-        this._adapter.unregisterTriggerEvent();
-    }
 
     _bindPortalEvent(portalEventSet: Record<string, any>) {
         this._adapter.registerPortalEvent(portalEventSet);
     }
 
-    _unBindPortalEvent() {
-        this._adapter.unregisterPortalEvent();
-    }
 
     _bindResizeEvent() {
         this._adapter.registerResizeHandler(this.onResize);
     }
 
-    _unBindResizeEvent() {
+    unBindResizeEvent() {
         this._adapter.unregisterResizeHandler(this.onResize);
     }
 
+    removePortal = () => {
+        this._adapter.removePortal();
+    }
+
     _reversePos(position = '', isVertical = false) {
         if (isVertical) {
             if (REGS.TOP.test(position)) {
@@ -807,13 +802,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.off('portalInserted');
         this._adapter.off('positionUpdated');
 
-        if (!this._adapter.canMotion()) {
-            this._adapter.removePortal();
-            // When the portal is removed, the global click outside event binding is also removed
-            this._adapter.unregisterClickOutsideHandler();
-            this._unBindScrollEvent();
-            this._unBindResizeEvent();
-        }
     };
 
     _bindScrollEvent() {
@@ -822,7 +810,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         // (By determining whether the e.target contains the triggerDom of the current tooltip) If so, the pop-up layer will also be affected and needs to be repositioned
     }
 
-    _unBindScrollEvent() {
+    unBindScrollEvent() {
         this._adapter.unregisterScrollHandler();
     }
 

packages/semi-ui/tooltip/index.tsx

@@ -254,11 +254,9 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             registerTriggerEvent: (triggerEventSet: Record<string, any>) => {
                 this.setState({ triggerEventSet });
             },
-            unregisterTriggerEvent: () => {},
             registerPortalEvent: (portalEventSet: Record<string, any>) => {
                 this.setState({ portalEventSet });
             },
-            unregisterPortalEvent: () => {},
             getTriggerBounding: () => {
                 // eslint-disable-next-line
                 // It may be a React component or an html element
@@ -484,10 +482,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     // };
 
     didLeave = () => {
-        this.adapter.unregisterClickOutsideHandler();
-        this.adapter.unregisterScrollHandler();
-        this.adapter.unregisterResizeHandler();
-        this.adapter.removePortal();
+        this.foundation.removePortal();
+        this.foundation.unBindEvent();
     };
     /** for transition - end */
 
@@ -570,8 +566,9 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         const icon = this.renderIcon();
         const portalInnerStyle = omit(containerStyle, motion ? ['transformOrigin'] : undefined);
         const transformOrigin = get(containerStyle, 'transformOrigin');
-        const inner = motion && isPositionUpdated ? (
+        const inner =
             <CSSAnimation animationState={transitionState as "enter"|"leave"}
+                motion={motion && isPositionUpdated}
                 startClassName={transitionState==='enter'?`${prefixCls}-animation-show`:`${prefixCls}-animation-hide`}
                 onAnimationEnd={()=>{
                     if (transitionState === 'leave'){
@@ -584,7 +581,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
 
                             className={classNames(className, animationClassName)}
                             style={{
-                                visibility: 'visible',
+                                visibility: (motion && isPositionUpdated)?'visible':"hidden",
                                 ...animationStyle,
                                 transformOrigin,
                                 ...style,
@@ -600,13 +597,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                         </div>;
                     }
                 }
-            </CSSAnimation>
-        ) : (
-            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? 'hidden' : 'visible', ...style }}>
-                {contentNode}
-                {icon}
-            </div>
-        );
+            </CSSAnimation>;
+
 
         return (
             <Portal getPopupContainer={this.props.getPopupContainer} style={{ zIndex }}>