diff --git a/src/index.tsx b/src/index.tsx index d55c6b1d..c192498c 100644 --- 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(null); + // Used for forwardRef popup. Not use internal + const externalPopupRef = React.useRef(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 index 825dbe31..2d0179e6 100644 --- 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(); + + render( + }> +