feat: support popupElement (#452)

react-component · Apr 10, 2024 · 4e1d80f · 4e1d80f
1 parent 50ae862
commit 4e1d80f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -37,6 +37,7 @@ export type {
 
 export interface TriggerRef {
   nativeElement: HTMLElement;
+  popupElement: HTMLElement;
   forceAlign: VoidFunction;
 }
 
@@ -239,7 +240,12 @@ export function generateTrigger(
     const id = useId();
     const [popupEle, setPopupEle] = React.useState<HTMLDivElement>(null);
 
+    // Used for forwardRef popup. Not use internal
+    const externalPopupRef = React.useRef<HTMLDivElement>(null);
+
     const setPopupRef = useEvent((node: HTMLDivElement) => {
+      externalPopupRef.current = node;
+
       if (isDOM(node) && popupEle !== node) {
         setPopupEle(node);
       }
@@ -462,6 +468,7 @@ export function generateTrigger(
     // ============================ Refs ============================
     React.useImperativeHandle(ref, () => ({
       nativeElement: externalForwardRef.current,
+      popupElement: externalPopupRef.current,
       forceAlign: triggerAlign,
     }));
 

diff --git a/tests/ref.test.tsx b/tests/ref.test.tsx
@@ -36,4 +36,18 @@ describe('Trigger.Ref', () => {
       container.querySelector('button'),
     );
   });
+
+  it('support popupElement', () => {
+    const triggerRef = React.createRef<TriggerRef>();
+
+    render(
+      <Trigger ref={triggerRef} popupVisible popup={<div />}>
+        <button />
+      </Trigger>,
+    );
+
+    expect(triggerRef.current.popupElement).toBe(
+      document.querySelector('.rc-trigger-popup'),
+    );
+  });
 });