chore: get dom

Author: zombieJ

src/index.tsx

@@ -2,9 +2,9 @@ import Portal from '@rc-component/portal';
 import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import { useResizeObserver } from '@rc-component/resize-observer';
-import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
+import { getDOM, isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import { getShadowRoot } from '@rc-component/util/lib/Dom/shadow';
-import {  useComposeRef } from '@rc-component/util/lib/ref';
+import { getNodeRef, useComposeRef } from '@rc-component/util/lib/ref';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import useId from '@rc-component/util/lib/hooks/useId';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
@@ -262,9 +262,11 @@ export function generateTrigger(
     const externalForwardRef = React.useRef<HTMLElement>(null);
 
     const setTargetRef = useEvent((node: HTMLElement) => {
-      if (isDOM(node) && targetEle !== node) {
-        setTargetEle(node);
-        externalForwardRef.current = node;
+      const domNode = getDOM(node) as HTMLElement;
+
+      if (isDOM(domNode) && targetEle !== domNode) {
+        setTargetEle(domNode);
+        externalForwardRef.current = domNode;
       }
     });
 
@@ -789,13 +791,13 @@ export function generateTrigger(
     useResizeObserver(mergedOpen, targetEle, onTargetResize);
 
     // Compose refs
-    const mergedRef = useComposeRef(setTargetRef, (child as any).ref);
+    const mergedRef = useComposeRef(setTargetRef, getNodeRef(child));
 
     // Child Node
     const triggerNode = React.cloneElement(child, {
-      ref: mergedRef,
       ...mergedChildrenProps,
       ...passedProps,
+      ref: mergedRef,
     });
 
     // Render

tests/ref.test.tsx

@@ -50,4 +50,36 @@ describe('Trigger.Ref', () => {
       document.querySelector('.rc-trigger-popup'),
     );
   });
+
+  it('should support ref.nativeElement', () => {
+    const ChildComponent = React.forwardRef<
+      { nativeElement: HTMLElement },
+      React.PropsWithChildren
+    >((props, ref) => {
+      const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+      React.useImperativeHandle(ref, () => ({
+        nativeElement: buttonRef.current,
+      }));
+
+      return <button ref={buttonRef} {...props} />;
+    });
+
+    const triggerRef = React.createRef<TriggerRef>();
+    const childRef = React.createRef<{ nativeElement: HTMLElement }>();
+
+    const { container } = render(
+      <Trigger ref={triggerRef} popup={<div />}>
+        <ChildComponent ref={childRef} />
+      </Trigger>,
+    );
+
+    const buttonElement = container.querySelector('button');
+
+    // Check child ref returns object with nativeElement
+    expect(childRef.current.nativeElement).toBe(buttonElement);
+
+    // Check Trigger can extract DOM from child ref
+    expect(triggerRef.current.nativeElement).toBe(buttonElement);
+  });
 });