fix: should hide popup when set alignPoint after scrolling (#417)

react-component · Aug 9, 2023 · 3ebd812 · 3ebd812
1 parent afd2782
commit 3ebd812
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 20 deletions.
diff --git a/src/hooks/useWatch.ts b/src/hooks/useWatch.ts
@@ -6,6 +6,7 @@ export default function useWatch(
   target: HTMLElement,
   popup: HTMLElement,
   onAlign: VoidFunction,
+  onScroll: VoidFunction,
 ) {
   useLayoutEffect(() => {
     if (open && target && popup) {
@@ -24,6 +25,7 @@ export default function useWatch(
 
       function notifyScroll() {
         onAlign();
+        onScroll();
       }
 
       mergedList.forEach((scroller) => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -387,13 +387,30 @@ export function generateTrigger(
       onPopupAlign,
     );
 
+    const [showActions, hideActions] = useAction(
+      mobile,
+      action,
+      showAction,
+      hideAction,
+    );
+
+    const clickToShow = showActions.has('click');
+    const clickToHide =
+      hideActions.has('click') || hideActions.has('contextMenu');
+
     const triggerAlign = useEvent(() => {
       if (!inMotion) {
         onAlign();
       }
     });
 
-    useWatch(mergedOpen, targetEle, popupEle, triggerAlign);
+    const onScroll = () => {
+      if (openRef.current && alignPoint && clickToHide) {
+        triggerOpen(false);
+      }
+    };
+
+    useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
 
     useLayoutEffect(() => {
       triggerAlign();
@@ -463,13 +480,6 @@ export function generateTrigger(
     };
 
     // =========================== Action ===========================
-    const [showActions, hideActions] = useAction(
-      mobile,
-      action,
-      showAction,
-      hideAction,
-    );
-
     /**
      * Util wrapper for trigger action
      */
@@ -489,10 +499,6 @@ export function generateTrigger(
     }
 
     // ======================= Action: Click ========================
-    const clickToShow = showActions.has('click');
-    const clickToHide =
-      hideActions.has('click') || hideActions.has('contextMenu');
-
     if (clickToShow || clickToHide) {
       cloneProps.onClick = (
         event: React.MouseEvent<HTMLElement>,

diff --git a/tests/point.test.jsx b/tests/point.test.jsx
@@ -22,15 +22,21 @@ describe('Trigger.Point', () => {
 
     render() {
       return (
-        <Trigger
-          ref={this.props.triggerRef}
-          popup={this.popup}
-          popupAlign={{ points: ['tl'] }}
-          alignPoint
-          {...this.props}
+        <div
+          className="scroll"
+          // Jest can not get calculated style in jsdom. So we need to set it manually
+          style={{ overflowX: 'hidden', overflowY: 'hidden' }}
         >
-          <div className="point-region" />
-        </Trigger>
+          <Trigger
+            ref={this.props.triggerRef}
+            popup={this.popup}
+            popupAlign={{ points: ['tl'] }}
+            alignPoint
+            {...this.props}
+          >
+            <div className="point-region" />
+          </Trigger>
+        </div>
       );
     }
   }
@@ -120,6 +126,21 @@ describe('Trigger.Point', () => {
         done();
       })();
     });
+
+    it('should hide popup when set alignPoint after scrolling', async () => {
+      const { container } = render(<Demo action={['contextMenu']} />);
+      await trigger(container, 'contextmenu', { clientX: 10, clientY: 20 });
+
+      const popup = document.querySelector('.rc-trigger-popup');
+      expect(popup.style).toEqual(
+        expect.objectContaining({ left: '10px', top: '20px' }),
+      );
+
+      const scrollDiv = container.querySelector('.scroll');
+      fireEvent.scroll(scrollDiv);
+
+      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
+    });
   });
 
   describe('placement', () => {