fix(tooltip): fix tooltip cannot hide when parent element has set stopPropgation (#614)

packages/semi-ui/tooltip/__test__/tooltip.test.js

@@ -290,6 +290,47 @@ describe(`Tooltip`, () => {
             expect(document.querySelector(`.${BASE_CLASS_PREFIX}-tooltip-wrapper`).getAttribute('x-placement')).toBe(position);
         }
     });
+
+  it(`test click outside handler`, async () => {
+    const containerId = `container`;
+
+    const demo = mount(
+      <div style={{ height: 480, width: 320 }}>
+        <div id={containerId}>Hello Semi</div>
+        <Tooltip
+          content='Content'
+          trigger='click'
+        >
+          <Button >Click here</Button>
+        </Tooltip>
+      </div>
+    );
+
+    const toolTipElem = demo.find(Tooltip);
+    const buttonElem = demo.find(Button);
+    // click inside
+    buttonElem.simulate('click');
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state(`visible`)).toBe(true);
+
+    // click outside
+    document.body.click();
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state('visible')).toBe(false);
+
+    // click button to show tooltip
+    buttonElem.simulate('click');
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state('visible')).toBe(true);
+
+    document.getElementById(containerId).click();
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state('visible')).toBe(false);
+  });
 });
 
 it('wrapperClassName', () => {

packages/semi-ui/tooltip/index.tsx

@@ -280,7 +280,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             getDocumentElementBounding: () => document.documentElement.getBoundingClientRect(),
             setPosition: ({ position, ...style }: { position: Position }) => {
                 this.setState(
-                    { 
+                    {
                         containerStyle: { ...this.state.containerStyle, ...style },
                         placement: position,
                         isPositionUpdated: true
@@ -326,11 +326,11 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                         cb();
                     }
                 };
-                document.addEventListener('click', this.clickOutsideHandler, false);
+                document.addEventListener('click', this.clickOutsideHandler, {capture: true});
             },
             unregisterClickOutsideHandler: () => {
                 if (this.clickOutsideHandler) {
-                    document.removeEventListener('click', this.clickOutsideHandler, false);
+                    document.removeEventListener('click', this.clickOutsideHandler, {capture: true});
                     this.clickOutsideHandler = null;
                 }
             },
@@ -661,4 +661,4 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     }
 }
 
-export { Position };
+export { Position };