소스 검색

fix: fix tooltip not show when already hover on mount (#2199)

代强 1 년 전
부모
커밋
8fc0554cab
2개의 변경된 파일28개의 추가작업 그리고 3개의 파일을 삭제
  1. 9 0
      packages/semi-foundation/tooltip/foundation.ts
  2. 19 3
      packages/semi-ui/tooltip/index.tsx

+ 9 - 0
packages/semi-foundation/tooltip/foundation.ts

@@ -189,6 +189,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         }
         }
     }
     }
 
 
+    updateStateIfCursorOnTrigger = (trigger: HTMLElement)=>{
+        if (trigger?.matches?.(":hover")) {
+            const eventNames = this._adapter.getEventName();
+            const triggerEventSet = this.getState("triggerEventSet");
+            triggerEventSet[eventNames.mouseEnter]?.();
+        }
+    }
+
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>) {
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>) {
         const eventNames = this._adapter.getEventName();
         const eventNames = this._adapter.getEventName();
         const triggerEventSet = {
         const triggerEventSet = {
@@ -647,6 +655,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         return style;
         return style;
     }
     }
 
 
+
     /**
     /**
      * 耦合的东西比较多,稍微罗列一下:
      * 耦合的东西比较多,稍微罗列一下:
      *
      *

+ 19 - 3
packages/semi-ui/tooltip/index.tsx

@@ -1,5 +1,5 @@
-import React, { isValidElement, cloneElement, CSSProperties } from 'react';
-import ReactDOM from 'react-dom';
+import React, { isValidElement, cloneElement, CSSProperties, ReactInstance } from 'react';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import PropTypes from 'prop-types';
 import { throttle, noop, get, omit, each, isEmpty, isFunction, isEqual } from 'lodash';
 import { throttle, noop, get, omit, each, isEmpty, isFunction, isEqual } from 'lodash';
@@ -20,7 +20,13 @@ import '@douyinfe/semi-foundation/tooltip/tooltip.scss';
 
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
 import { isHTMLElement } from '../_base/reactUtils';
-import { getActiveElement, getDefaultPropsFromGlobalConfig, getFocusableElements, stopPropagation } from '../_utils';
+import {
+    getActiveElement,
+    getDefaultPropsFromGlobalConfig,
+    getFocusableElements,
+    runAfterTicks,
+    stopPropagation,
+} from '../_utils';
 import Portal from '../_portal/index';
 import Portal from '../_portal/index';
 import ConfigContext, { ContextValue } from '../configProvider/context';
 import ConfigContext, { ContextValue } from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
 import TriangleArrow from './TriangleArrow';
@@ -459,6 +465,16 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         this.mounted = true;
         this.mounted = true;
         this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || defaultGetContainer;
         this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || defaultGetContainer;
         this.foundation.init();
         this.foundation.init();
+        runAfterTicks(()=>{
+            let triggerEle = this.triggerEl.current;
+            if (triggerEle) {
+                if (!(triggerEle instanceof HTMLElement)) {
+                    triggerEle = findDOMNode(triggerEle as ReactInstance);
+                }
+            }
+            this.foundation.updateStateIfCursorOnTrigger(triggerEle as HTMLElement);
+        }, 1);
+
     }
     }
 
 
     componentWillUnmount() {
     componentWillUnmount() {