fix: [popper]修复onVisibleChange问题 fix #937

kingdee · Nov 22, 2024 · f9194f1 · f9194f1
1 parent 749f574
commit f9194f1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/components/popper/index.tsx b/components/popper/index.tsx
@@ -236,6 +236,7 @@ export const Popper = forwardRef<unknown, PopperProps>((props, ref) => {
 
   const popperInstance = useRef<Instance | null>(null)
   const referenceRefInner = useRef<any>(null)
+  const onVisibleChangeRef = useRef<PopperProps['onVisibleChange']>(onVisibleChange)
 
   const referenceRef = referenceElement?.ref || referenceRefInner
   const container = getPopupContainer(getRealDom(referenceRef, referenceElement) || document.body) || document.body
@@ -262,7 +263,7 @@ export const Popper = forwardRef<unknown, PopperProps>((props, ref) => {
       if (typeof visible === 'undefined') {
         setVisibleInner(nextOpen)
       }
-      onVisibleChange?.(nextOpen, triggerType)
+      onVisibleChangeRef.current?.(nextOpen, triggerType)
     }
     if (!nextOpen && Object.keys(subPopupRefs.current || {}).length) {
       Object.values(subPopupRefs.current).forEach((d: any) => {
@@ -391,6 +392,10 @@ export const Popper = forwardRef<unknown, PopperProps>((props, ref) => {
     }
   }
 
+  useEffect(() => {
+    onVisibleChangeRef.current = onVisibleChange
+  }, [onVisibleChange])
+
   useEffect(() => {
     setPlacementInner(getRealPlacement(placement))
   }, [placement])

diff --git a/components/tooltip/demo/function.md b/components/tooltip/demo/function.md
@@ -8,17 +8,32 @@ order: 0
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Tooltip } from '@kdcloudjs/kdesign'
+import { Tooltip, Button } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
+  const [test, setTest] = React.useState(0)
+  const onClick = () => {
+    const t = test + 1
+    console.log('test', t)
+    setTest(t)
+  }
+  const onVisibleChange = (visible, t) => {
+    console.log('onVisibleChange', visible, t, test)
+  }
+
   return (
-    <Tooltip tip="一行最多显示20个字符，超过的字符可折行显示，建议最多不要超过40个字符" 
-      onVisibleChange={(visible) => console.log(typeof visible, visible)}
-      >
+    <Tooltip
+      tip={
+        <div>
+          <Button onClick={onClick}>test</Button>
+        </div>
+      }
+      trigger="click"
+      onVisibleChange={onVisibleChange}>
       <span>Mouse over will show Tooltip</span>
     </Tooltip>
   )
 }
 
 ReactDOM.render(<Demo />, mountNode)
-```
+```