feat: fallback to original findDOMNode if using function component (#145

)

* fallback to original findDOMNode if fc

* update demo

* clean up

examples/simple.js

@@ -31,14 +31,27 @@ const builtinPlacements = {
   },
 };
 
-function preventDefault(e) {
-  e.preventDefault();
-}
-
 function getPopupContainer(trigger) {
   return trigger.parentNode;
 }
 
+const InnerTarget = React.forwardRef((props, ref) => {
+  React.useImperativeHandle(ref, () => ({}));
+
+  return (
+    <div
+      style={{ margin: 20, display: 'inline-block', background: 'rgba(255, 0, 0, 0.05)' }}
+      tabIndex={0}
+      role="button"
+      {...props}
+    >
+      <p>This is a example of trigger usage.</p>
+      <p>You can adjust the value above</p>
+      <p>which will also change the behaviour of popup.</p>
+    </div>
+  );
+});
+
 class Test extends React.Component {
   state = {
     mask: false,
@@ -259,7 +272,7 @@ class Test extends React.Component {
         </div>
         <div style={{ margin: 120, position: 'relative' }}>
           <Trigger
-            getPopupContainer={undefined && getPopupContainer}
+            getPopupContainer={getPopupContainer}
             popupAlign={this.getPopupAlign()}
             popupPlacement={state.placement}
             destroyPopupOnHide={this.state.destroyPopupOnHide}
@@ -281,15 +294,7 @@ class Test extends React.Component {
             popup={<div>i am a popup</div>}
             popupTransitionName={state.transitionName}
           >
-            <a
-              style={{ margin: 20, display: 'inline-block', background: 'rgba(255, 0, 0, 0.05)' }}
-              href="#"
-              onClick={preventDefault}
-            >
-              <p>This is a example of trigger usage.</p>
-              <p>You can adjust the value above</p>
-              <p>which will also change the behaviour of popup.</p>
-            </a>
+            <InnerTarget />
           </Trigger>
         </div>
       </div>

src/index.tsx

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import ReactDOM from 'react-dom';
 import contains from 'rc-util/lib/Dom/contains';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import { composeRef } from 'rc-util/lib/ref';
@@ -394,12 +395,22 @@ export function generateTrigger(PortalComponent: any): React.ComponentClass<Trig
       return null;
     }
 
-    getRootDomNode = () => {
+    getRootDomNode = (): HTMLElement => {
       const { getTriggerDOMNode } = this.props;
       if (getTriggerDOMNode) {
         return getTriggerDOMNode(this.triggerRef.current);
       }
-      return findDOMNode<HTMLElement>(this.triggerRef.current);
+
+      try {
+        const domNode = findDOMNode<HTMLElement>(this.triggerRef.current);
+        if (domNode) {
+          return domNode;
+        }
+      } catch (err) {
+        // Do nothing
+      }
+
+      return ReactDOM.findDOMNode(this) as HTMLElement;
     };
 
     getPopupClassNameFromAlign = align => {

tests/basic.test.jsx

@@ -512,4 +512,31 @@ describe('Trigger.Basic', () => {
       'target className-in-trigger-1 className-in-trigger-2',
     );
   });
+
+  it('support function component', () => {
+    const NoRef = React.forwardRef((props, ref) => {
+      React.useImperativeHandle(ref, () => null);
+      return (
+        <div className="target" {...props}>
+          click
+        </div>
+      );
+    });
+
+    const wrapper = mount(
+      <Trigger
+        action={['click']}
+        popupAlign={placementAlignMap.left}
+        popup={<strong className="x-content">tooltip2</strong>}
+      >
+        <NoRef />
+      </Trigger>,
+    );
+
+    wrapper.trigger();
+    expect(wrapper.isHidden()).toBeFalsy();
+
+    wrapper.trigger();
+    expect(wrapper.isHidden()).toBeTruthy();
+  });
 });