From a2fdef5535c199cbfdcee8b0175c7678fc4e03de Mon Sep 17 00:00:00 2001
From: jzh <wb.jiangzonghao01@mesg.corp.netease.com>
Date: Thu, 29 Jun 2023 15:18:04 +0800
Subject: [PATCH 1/3] fix: contextMenu close all

---
 docs/examples/body-overflow.tsx | 152 +++++++++++++++++++++++++++++++-
 src/hooks/useWinClick.ts        |   4 +
 src/index.tsx                   |  15 ++--
 3 files changed, 165 insertions(+), 6 deletions(-)

diff --git a/docs/examples/body-overflow.tsx b/docs/examples/body-overflow.tsx
index 5e87d96a..58997c7f 100644
--- a/docs/examples/body-overflow.tsx
+++ b/docs/examples/body-overflow.tsx
@@ -5,7 +5,9 @@ import '../../assets/index.less';
 
 export default () => {
   const [open, setOpen] = React.useState(false);
-
+  const [open1, setOpen1] = React.useState(false);
+  const [open2, setOpen2] = React.useState(false);
+  const [open3, setOpen3] = React.useState(false);
   return (
     <React.StrictMode>
       <style
@@ -72,6 +74,154 @@ export default () => {
           Target
         </span>
       </Trigger>
+
+      <Trigger
+        arrow
+        action="click"
+        popupVisible={open1}
+        onPopupVisibleChange={(next) => {
+          console.log('Visible Change:', next);
+          setOpen1(next);
+        }}
+        popupTransitionName="rc-trigger-popup-zoom"
+        popup={
+          <div
+            style={{
+              background: 'yellow',
+              border: '1px solid blue',
+              width: 200,
+              height: 60,
+              opacity: 0.9,
+            }}
+          >
+            <button
+              onClick={() => {
+                setOpen1(false);
+              }}
+            >
+              Close
+            </button>
+          </div>
+        }
+        // popupVisible
+        popupStyle={{ boxShadow: '0 0 5px red' }}
+        popupAlign={{
+          points: ['tc', 'bc'],
+          overflow: {
+            shiftX: 50,
+            adjustY: true,
+          },
+          htmlRegion: 'scroll',
+        }}
+      >
+        <span
+          style={{
+            background: 'green',
+            color: '#FFF',
+            paddingBlock: 30,
+            paddingInline: 70,
+            opacity: 0.9,
+            transform: 'scale(0.6)',
+            display: 'inline-block',
+          }}
+        >
+          Target Click
+        </span>
+      </Trigger>
+
+      <Trigger
+        arrow
+        action="contextMenu"
+        popupVisible={open2}
+        onPopupVisibleChange={(next) => {
+          console.log('Visible Change:', next);
+          setOpen2(next);
+        }}
+        popupTransitionName="rc-trigger-popup-zoom"
+        popup={
+          <div
+            style={{
+              background: 'yellow',
+              border: '1px solid blue',
+              width: 200,
+              height: 60,
+              opacity: 0.9,
+            }}
+          >
+            Target ContextMenu1
+          </div>
+        }
+        popupStyle={{ boxShadow: '0 0 5px red' }}
+        popupAlign={{
+          points: ['tc', 'bc'],
+          overflow: {
+            shiftX: 50,
+            adjustY: true,
+          },
+          htmlRegion: 'scroll',
+        }}
+      >
+        <span
+          style={{
+            background: 'blue',
+            color: '#FFF',
+            paddingBlock: 30,
+            paddingInline: 70,
+            opacity: 0.9,
+            transform: 'scale(0.6)',
+            display: 'inline-block',
+          }}
+        >
+          Target ContextMenu1
+        </span>
+      </Trigger>
+
+      <Trigger
+        arrow
+        action="contextMenu"
+        popupVisible={open3}
+        onPopupVisibleChange={(next) => {
+          console.log('Visible Change:', next);
+          setOpen3(next);
+        }}
+        popupTransitionName="rc-trigger-popup-zoom"
+        popup={
+          <div
+            style={{
+              background: 'yellow',
+              border: '1px solid blue',
+              width: 200,
+              height: 60,
+              opacity: 0.9,
+            }}
+          >
+            Target ContextMenu2
+          </div>
+        }
+        popupStyle={{ boxShadow: '0 0 5px red' }}
+        popupAlign={{
+          points: ['tc', 'bc'],
+          overflow: {
+            shiftX: 50,
+            adjustY: true,
+          },
+          htmlRegion: 'scroll',
+        }}
+      >
+        <span
+          style={{
+            background: 'blue',
+            color: '#FFF',
+            paddingBlock: 30,
+            paddingInline: 70,
+            opacity: 0.9,
+            transform: 'scale(0.6)',
+            display: 'inline-block',
+          }}
+        >
+          Target ContextMenu2
+        </span>
+      </Trigger>
     </React.StrictMode>
   );
 };
diff --git a/src/hooks/useWinClick.ts b/src/hooks/useWinClick.ts
index f7ff6f7e..58a10d79 100644
--- a/src/hooks/useWinClick.ts
+++ b/src/hooks/useWinClick.ts
@@ -67,12 +67,14 @@ export default function useWinClick(
 
       win.addEventListener('mousedown', onWinMouseDown);
       win.addEventListener('click', onWinClick);
+      win.addEventListener('contextmenu', onWinClick);
 
       // shadow root
       const targetShadowRoot = getShadowRoot(targetEle);
       if (targetShadowRoot) {
         targetShadowRoot.addEventListener('mousedown', onShadowMouseDown);
         targetShadowRoot.addEventListener('click', onShadowClick);
+        targetShadowRoot.addEventListener('contextmenu', onShadowClick);
       }
 
       // Warning if target and popup not in same root
@@ -89,10 +91,12 @@ export default function useWinClick(
       return () => {
         win.removeEventListener('mousedown', onWinMouseDown);
         win.removeEventListener('click', onWinClick);
+        win.removeEventListener('contextmenu', onWinClick);
 
         if (targetShadowRoot) {
           targetShadowRoot.removeEventListener('mousedown', onShadowMouseDown);
           targetShadowRoot.removeEventListener('click', onShadowClick);
+          targetShadowRoot.removeEventListener('contextmenu', onShadowClick);
         }
       };
     }
diff --git a/src/index.tsx b/src/index.tsx
index cde8cb5d..8e2fbc07 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -551,8 +551,13 @@ export function generateTrigger(
     // ==================== Action: ContextMenu =====================
     if (showActions.has('contextMenu')) {
       cloneProps.onContextMenu = (event: React.MouseEvent, ...args: any[]) => {
-        setMousePosByEvent(event);
-        triggerOpen(true);
+        if (openRef.current && hideActions.has('contextMenu')) {
+          triggerOpen(false);
+        } else {
+          setMousePosByEvent(event);
+          triggerOpen(true);
+        }
+
         event.preventDefault();
 
         // Pass to origin
@@ -606,9 +611,9 @@ export function generateTrigger(
 
     const innerArrow: ArrowTypeOuter = arrow
       ? {
-          // true and Object likely
-          ...(arrow !== true ? arrow : {}),
-        }
+        // true and Object likely
+        ...(arrow !== true ? arrow : {}),
+      }
       : null;
 
     // Render

From 8762090d09f93c21860de52813a7065dba22cab6 Mon Sep 17 00:00:00 2001
From: jzh <1587315093@qq.com>
Date: Thu, 29 Jun 2023 20:24:56 +0800
Subject: [PATCH 2/3] test: add all closed test cases

---
 tests/basic.test.jsx | 54 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/tests/basic.test.jsx b/tests/basic.test.jsx
index 7916ce66..9dcee874 100644
--- a/tests/basic.test.jsx
+++ b/tests/basic.test.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render ,mount} from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React, { createRef, StrictMode } from 'react';
 import ReactDOM from 'react-dom';
@@ -35,7 +35,16 @@ describe('Trigger.Basic', () => {
       .querySelector('.rc-trigger-popup')
       .className.includes('-hidden');
   }
-
+  function isPopupClassHidden(name) {
+    return document
+      .querySelector(name).className.includes('-hidden')
+  }
+  function isPopupAllHidden() {
+    const popupArr = document
+      .querySelectorAll('.rc-trigger-popup')
+  
+    return Array.from(popupArr).every(item => item.className.includes('-hidden'))
+  }
   describe('getPopupContainer', () => {
     it('defaults to document.body', () => {
       const { container } = render(
@@ -160,7 +169,46 @@ describe('Trigger.Basic', () => {
 
       expect(isPopupHidden()).toBeTruthy();
     });
+    it('contextMenu all close ', () => {
+      const triggerRef1 = createRef();
+      const triggerRef2 = createRef();
+      const { container } = render(
+        <>
+          <Trigger
+            ref={triggerRef1}
+            popupClassName='trigger-popup1'
+            action={['contextMenu']}
+            popupAlign={placementAlignMap.left}
+            popup={<strong>trigger1</strong>}
+          >
+            <div className="target1">contextMenu 1</div>
+          </Trigger>
+          <Trigger
+            ref={triggerRef2}
+            action={['contextMenu']}
+            popupClassName='trigger-popup2'
+            popupAlign={placementAlignMap.right}
+            popup={<strong>trigger2</strong>}
+          >
+            <div className="target2">contextMenu 2</div>
+          </Trigger>
+        </>,
+      );
+   
+      trigger(container, '.target1', 'contextMenu');
+      trigger(container, '.target2', 'contextMenu');
+      // console.log(isPopupClassHidden('.trigger-popup1'),isPopupClassHidden('.trigger-popup2'),'==================');
+      expect(isPopupClassHidden('.trigger-popup1')).toBeTruthy();
+      expect(isPopupClassHidden('.trigger-popup2')).toBeFalsy();
+
+      trigger(container, '.target1', 'contextMenu');
+      expect(isPopupClassHidden('.trigger-popup1')).toBeFalsy();
+      expect(isPopupClassHidden('.trigger-popup2')).toBeTruthy();
 
+      fireEvent.click(document.body);
+      expect(isPopupAllHidden()).toBeTruthy();
+      // expect(isPopupClassHidden('.trigger-popup2')).toBeTruthy();
+    });
     describe('afterPopupVisibleChange can be triggered', () => {
       it('uncontrolled', async () => {
         let triggered = 0;
@@ -836,7 +884,7 @@ describe('Trigger.Basic', () => {
   });
 
   it('find real dom node if children not support `forwardRef`', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
     const Node = () => <p />;
 
     render(

From 935961826923bd586b2997b2cf6f1c3c490f67d6 Mon Sep 17 00:00:00 2001
From: jzh <1587315093@qq.com>
Date: Thu, 29 Jun 2023 20:26:27 +0800
Subject: [PATCH 3/3] style: delete note

---
 tests/basic.test.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/basic.test.jsx b/tests/basic.test.jsx
index 9dcee874..254cb58b 100644
--- a/tests/basic.test.jsx
+++ b/tests/basic.test.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 
-import { act, cleanup, fireEvent, render ,mount} from '@testing-library/react';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React, { createRef, StrictMode } from 'react';
 import ReactDOM from 'react-dom';
@@ -197,7 +197,6 @@ describe('Trigger.Basic', () => {
    
       trigger(container, '.target1', 'contextMenu');
       trigger(container, '.target2', 'contextMenu');
-      // console.log(isPopupClassHidden('.trigger-popup1'),isPopupClassHidden('.trigger-popup2'),'==================');
       expect(isPopupClassHidden('.trigger-popup1')).toBeTruthy();
       expect(isPopupClassHidden('.trigger-popup2')).toBeFalsy();
 
@@ -207,7 +206,6 @@ describe('Trigger.Basic', () => {
 
       fireEvent.click(document.body);
       expect(isPopupAllHidden()).toBeTruthy();
-      // expect(isPopupClassHidden('.trigger-popup2')).toBeTruthy();
     });
     describe('afterPopupVisibleChange can be triggered', () => {
       it('uncontrolled', async () => {